虾米网页播放器

给虾米网页播放器添加快捷键:音量(E-上调;D-下调)、下一首(F)、上一首(S)、隐藏/显示播放器(Q)

目前为 2018-12-17 提交的版本。查看 最新版本

  1. // ==UserScript==
  2. // @name 虾米网页播放器
  3. // @namespace https://github.com/maijz128
  4. // @version 1.0.0
  5. // @description 给虾米网页播放器添加快捷键:音量(E-上调;D-下调)、下一首(F)、上一首(S)、隐藏/显示播放器(Q)
  6. // @author MaiJZ
  7. // @match *://www.xiami.com/*
  8. // @require http://code.jquery.com/jquery-1.12.4.min.js
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12.  
  13.  
  14. const KEYS = {
  15. ENTER: 13, SPACE: 32, ESC: 27,
  16. LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40,
  17. A: 65, D: 68, E: 69, F: 70, R: 82, S: 83, W: 87, Z: 90, Q: 81
  18. };
  19.  
  20. const G = {
  21. UpVolume: KEYS.E, DownVolume: KEYS.D, PrevSong: KEYS.S, NextSong: KEYS.F, ToggleUI: KEYS.Q,
  22. ToggleList: KEYS.R
  23. };
  24.  
  25. (function () {
  26. main();
  27. })();
  28.  
  29. function main() {
  30. if (matchURL('/radio/play/')) {
  31. new Radio();
  32. } else if (matchURL('xiami.com/play')) {
  33. new OnlinePlayer();
  34. } else {
  35. window._NewUI_Player = new NewUI_Player();
  36.  
  37. // old index ui
  38. setTimeout(function () {
  39. tosign();
  40. }, 1000);
  41. }
  42. }
  43.  
  44. function NewUI_Player(){
  45. var self = this;
  46. this.isHide = false;
  47.  
  48. this.togglePlayerUI = function(){
  49. var elBtn = document.querySelector('#player-toggle-button');
  50. var elPlayer = document.querySelector(".player");
  51.  
  52. self.isHide = !self.isHide;
  53.  
  54. if(self.isHide){
  55. elBtn.innerHTML = '>>';
  56. elPlayer.classList.add('player-hide');
  57. }else{
  58. elBtn.innerHTML = '<<';
  59. elPlayer.classList.remove('player-hide');
  60. }
  61. };
  62.  
  63. // init
  64. var timeout = 1000;
  65. setTimeout(function () {
  66. onKeyDown();
  67. addShortcutKeySwitch();
  68. addToggleButton();
  69. }, timeout);
  70.  
  71.  
  72.  
  73. function addToggleButton(){
  74. var container = document.querySelector(".play-bar");
  75. if (container) {
  76. var style='';
  77. style += '.player-toggle-button { float: right; height: 72px; cursor: pointer; background: #fff; border: 1px solid #ccc;}';
  78. style += '.player .audio-progress, .player .play-bar { visibility: visible; opacity: 1; transition: visibility 0.5s, opacity 0.5s linear; } ';
  79. style += '.player-hide .audio-progress, .player-hide .play-bar { visibility: hidden; opacity: 0; } ';
  80. style += '.player-hide .player-toggle-button { position: absolute; left: 0; bottom: 0;} ';
  81. style += '.player-hide .common-mode { width: 40px;} ';
  82. addStyle(style);
  83.  
  84. var elButton = document.createElement("button");
  85. elButton.setAttribute('id', 'player-toggle-button');
  86. elButton.classList.add('player-toggle-button');
  87. elButton.onclick = self.togglePlayerUI;
  88. elButton.innerHTML = '<<';
  89.  
  90. // container.appendChild(elButton);
  91. $(container).before(elButton);
  92.  
  93. }
  94. }
  95. function addShortcutKeySwitch() {
  96. var container = document.querySelector(".play-bar");
  97. if (container) {
  98. var style='text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-left: 10px;';
  99. style = '.player-bar-item {' + style +'}';
  100. addStyle(style);
  101.  
  102. var elCheckbox = document.createElement("div");
  103. elCheckbox.classList.add('player-bar-item');
  104. elCheckbox.innerHTML =
  105. '<input type="checkbox" name="shortchut_key" id="mjz_shortcutkeyswitch" checked="true">快捷键';
  106.  
  107. container.appendChild(elCheckbox);
  108. }
  109. }
  110.  
  111. function isShortcutKey() {
  112. var elSwitch = document.getElementById("mjz_shortcutkeyswitch");
  113. if (elSwitch) {
  114. return elSwitch.checked;
  115. }
  116. return true;
  117. }
  118.  
  119. function notPressControlKey(e){
  120. return !(e.altKey || e.ctrlKey || e.shiftKey);
  121. }
  122.  
  123. function onKeyDown() {
  124. document.onkeydown = function (event) {
  125. var e = event || window.event || arguments.callee.caller.arguments[0];
  126. if (e && isShortcutKey() && notPressControlKey(e)) {
  127. handleKeyDown(e.keyCode);
  128. }
  129. };
  130. }
  131.  
  132. function handleKeyDown(keyCode) {
  133. var player_main = document.querySelector(".page-container .player");
  134. var player_audio = document.querySelector('.page-container .player audio');
  135.  
  136. if(!(player_main && player_audio)){
  137. console.error('not found player');
  138. return;
  139. }
  140.  
  141. var volume = null;
  142. switch (keyCode) {
  143. case G.UpVolume:
  144. // fireKeyEvent(player_main, "keydown", KEYS.UP);
  145. volume = player_audio.volume + 0.1;
  146. if(volume > 1) { volume = 1; }
  147. player_audio.volume = volume;
  148. console.log(keyCode + ": UpVolume = " + volume);
  149. break;
  150.  
  151. case G.DownVolume:
  152. // fireKeyEvent(player_main, "keydown", KEYS.DOWN);
  153. volume = player_audio.volume - 0.1;
  154. if(volume < 0) { volume = 0; }
  155. player_audio.volume = volume;
  156. console.log(keyCode + ": DownVolume = " + volume);
  157. break;
  158.  
  159. case G.PrevSong:
  160. console.log(keyCode + ": PrevSong");
  161. fireKeyEvent(player_main, "keydown", KEYS.LEFT);
  162. break;
  163.  
  164. case G.NextSong:
  165. console.log(keyCode + ": NextSong");
  166. fireKeyEvent(player_main, "keydown", KEYS.RIGHT);
  167. break;
  168.  
  169. case G.ToggleUI:
  170. console.log(keyCode + ": ToggleUI");
  171. self.togglePlayerUI();
  172. break;
  173.  
  174. case G.ToggleList:
  175. console.log(keyCode + ": ToggleList");
  176. var play_list_control = document.querySelector('.play-list-control');
  177. if(play_list_control){
  178. eventFire(play_list_control, 'click');
  179. }
  180. break;
  181. default:
  182. break;
  183. }
  184. }
  185. }
  186.  
  187. // 自动签到
  188. function tosign() {
  189. var b_tosign = $(' div.content div.action .tosign');
  190. if (b_tosign) {
  191. b_tosign.click();
  192. }
  193. }
  194.  
  195. function Radio() {
  196.  
  197. hide_sidebutton();
  198.  
  199. // onKeyDown();
  200.  
  201. function canShortcutKey() {
  202. // const elSwitch = document.getElementById("mjz_shortcutkeyswitch");
  203. // if (elSwitch) {
  204. // return elSwitch.checked;
  205. // }
  206. return true;
  207. }
  208.  
  209. function onKeyDown() {
  210. document.onkeydown = function (event) {
  211. var e = event || window.event || arguments.callee.caller.arguments[0];
  212. if (e && canShortcutKey()) {
  213. handleKeyDown(e.keyCode);
  214. }
  215. };
  216. }
  217.  
  218. function handleKeyDown(keyCode) {
  219. const player_main = document.getElementById("radioPlayer");
  220. switch (keyCode) {
  221. case G.UpVolume:
  222. console.log(keyCode + ": UpVolume");
  223. fireKeyEvent(player_main, "keydown", KEYS.UP);
  224. break;
  225.  
  226. case G.DownVolume:
  227. console.log(keyCode + ": DownVolume");
  228. fireKeyEvent(player_main, "keydown", KEYS.DOWN);
  229. break;
  230.  
  231. case G.PrevSong:
  232. console.log(keyCode + ": PrevSong");
  233. fireKeyEvent(player_main, "keydown", KEYS.LEFT);
  234. break;
  235.  
  236. case G.NextSong:
  237. console.log(keyCode + ": NextSong");
  238. fireKeyEvent(player_main, "keydown", KEYS.RIGHT);
  239. break;
  240.  
  241. default:
  242. break;
  243. }
  244. }
  245.  
  246. function hide_sidebutton(){
  247. var style = `
  248. @media only screen and (max-height: 500px) {
  249. #sidebutton {
  250. display: none;
  251. }
  252. }
  253. `;
  254.  
  255. addStyle(style);
  256. }
  257. }
  258.  
  259. function OnlinePlayer() {
  260. playerHQ();
  261. addShortcutKeySwitch();
  262. onKeyDown();
  263.  
  264.  
  265. function playerHQ() {
  266. var timeout = 2000;
  267. setTimeout(function () {
  268. const elHQ = document.getElementById("J_playerHQ");
  269. if (elHQ) {
  270. elHQ.click();
  271. closeDialog_clt();
  272. }
  273. }, timeout);
  274. }
  275.  
  276. // 当点击切换音质时,出现付费提示,自动关闭它
  277. function closeDialog_clt() {
  278. var timeout = 500;
  279. setTimeout(function () {
  280. const el_dialog_clt = document.getElementById("dialog_clt");
  281. // 官方方法
  282. closedialog();
  283. }, timeout);
  284. }
  285.  
  286.  
  287. function addShortcutKeySwitch() {
  288. var timeout = 1000;
  289. setTimeout(function () {
  290. const el = document.querySelector(".player-controls");
  291. if (el) {
  292. const elCheckbox = document.createElement("lable");
  293. elCheckbox.innerHTML =
  294. '<input type="checkbox" name="shortchut_key" id="mjz_shortcutkeyswitch" checked="true">快捷键';
  295.  
  296. el.appendChild(elCheckbox);
  297. }
  298. }, timeout);
  299. }
  300. function isShortcutKey() {
  301. const elSwitch = document.getElementById("mjz_shortcutkeyswitch");
  302. if (elSwitch) {
  303. return elSwitch.checked;
  304. }
  305. return true;
  306. }
  307.  
  308. function onKeyDown() {
  309. document.onkeydown = function (event) {
  310. var e = event || window.event || arguments.callee.caller.arguments[0];
  311. if (e && isShortcutKey()) {
  312. handleKeyDown(e.keyCode);
  313. }
  314. };
  315. }
  316.  
  317. function handleKeyDown(keyCode) {
  318. const player_main = document.getElementById("player-main");
  319. switch (keyCode) {
  320. case G.UpVolume:
  321. console.log(keyCode + ": UpVolume");
  322. fireKeyEvent(player_main, "keydown", KEYS.UP);
  323. break;
  324.  
  325. case G.DownVolume:
  326. console.log(keyCode + ": DownVolume");
  327. fireKeyEvent(player_main, "keydown", KEYS.DOWN);
  328. break;
  329.  
  330. case G.PrevSong:
  331. console.log(keyCode + ": PrevSong");
  332. fireKeyEvent(player_main, "keydown", KEYS.LEFT);
  333. break;
  334.  
  335. case G.NextSong:
  336. console.log(keyCode + ": NextSong");
  337. fireKeyEvent(player_main, "keydown", KEYS.RIGHT);
  338. break;
  339.  
  340. default:
  341. break;
  342. }
  343. }
  344.  
  345.  
  346. }
  347.  
  348. // Usage: fireKeyEvent(input元素, 'keydown', 13);
  349. // http://blog.csdn.net/lovelyelfpop/article/details/52471878
  350. function fireKeyEvent(el, evtType, keyCode) {
  351. var doc = el.ownerDocument;
  352. var win = doc.defaultView || doc.parentWindow,
  353. evtObj;
  354. if (doc.createEvent) {
  355. if (win.KeyEvent) {
  356. evtObj = doc.createEvent('KeyEvents');
  357. evtObj.initKeyEvent( evtType, true, true, win, false, false, false, false, keyCode, 0 );
  358. }
  359. else {
  360. evtObj = doc.createEvent('UIEvents');
  361. Object.defineProperty(evtObj, 'keyCode', {
  362. get : function () { return this.keyCodeVal; }
  363. });
  364. Object.defineProperty(evtObj, 'which', {
  365. get : function () { return this.keyCodeVal; }
  366. });
  367. evtObj.initUIEvent( evtType, true, true, win, 1 );
  368. evtObj.keyCodeVal = keyCode;
  369. if (evtObj.keyCode !== keyCode) {
  370. console.log("keyCode " + evtObj.keyCode + " 和 (" + evtObj.which + ") 不匹配");
  371. }
  372. }
  373. el.dispatchEvent(evtObj);
  374. }
  375. else if (doc.createEventObject) {
  376. evtObj = doc.createEventObject();
  377. evtObj.keyCode = keyCode;
  378. el.fireEvent('on' + evtType, evtObj);
  379. }
  380. }
  381.  
  382. function eventFire(el, eType){
  383. if (el.fireEvent) {
  384. el.fireEvent('on' + eType);
  385. } else {
  386. var evObj = document.createEvent('Events');
  387. evObj.initEvent(eType, true, false);
  388. el.dispatchEvent(evObj);
  389. }
  390. }
  391.  
  392. function matchURL(url) {
  393. const URL = window.location.href; return URL.indexOf(url) > -1;
  394. }
  395.  
  396. function addStyle(styleContent) {
  397. var elStyle = document.createElement("style"); elStyle.innerHTML = styleContent; document.head.appendChild(elStyle);
  398. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址