虾米网页播放器

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

目前为 2020-12-01 提交的版本。查看 最新版本

  1. // ==UserScript==
  2. // @name 虾米网页播放器
  3. // @namespace https://github.com/maijz128
  4. // @version 1.0.1
  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,
  22. Pause: KEYS.SPACE, ToggleUI: KEYS.Q, 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. var btn = document.querySelector('.main-control-wrapper .main-control .prev');
  163. if(btn){
  164. eventFire(btn, 'click');
  165. }
  166. break;
  167.  
  168. case G.NextSong:
  169. console.log(keyCode + ": NextSong");
  170. // fireKeyEvent(player_main, "keydown", KEYS.RIGHT);
  171. var btn = document.querySelector('.main-control-wrapper .main-control .next');
  172. if(btn){
  173. eventFire(btn, 'click');
  174. }
  175. break;
  176.  
  177. case G.Pause:
  178. console.log(keyCode + ": PauseSong");
  179. // fireKeyEvent(player_main, "keydown", KEYS.RIGHT);
  180. var btn = document.querySelector('.main-control-wrapper .main-control .play-btn');
  181. if(btn){
  182. eventFire(btn, 'click');
  183. }
  184. break;
  185.  
  186. case G.ToggleUI:
  187. console.log(keyCode + ": ToggleUI");
  188. self.togglePlayerUI();
  189. break;
  190.  
  191. case G.ToggleList:
  192. console.log(keyCode + ": ToggleList");
  193. var play_list_control = document.querySelector('.play-list-control');
  194. if(play_list_control){
  195. eventFire(play_list_control, 'click');
  196. }
  197. break;
  198. default:
  199. break;
  200. }
  201. }
  202. }
  203.  
  204. // 自动签到
  205. function tosign() {
  206. var b_tosign = $(' div.content div.action .tosign');
  207. if (b_tosign) {
  208. b_tosign.click();
  209. }
  210. }
  211.  
  212. function Radio() {
  213.  
  214. hide_sidebutton();
  215.  
  216. // onKeyDown();
  217.  
  218. function canShortcutKey() {
  219. // const elSwitch = document.getElementById("mjz_shortcutkeyswitch");
  220. // if (elSwitch) {
  221. // return elSwitch.checked;
  222. // }
  223. return true;
  224. }
  225.  
  226. function onKeyDown() {
  227. document.onkeydown = function (event) {
  228. var e = event || window.event || arguments.callee.caller.arguments[0];
  229. if (e && canShortcutKey()) {
  230. handleKeyDown(e.keyCode);
  231. }
  232. };
  233. }
  234.  
  235. function handleKeyDown(keyCode) {
  236. const player_main = document.getElementById("radioPlayer");
  237. switch (keyCode) {
  238. case G.UpVolume:
  239. console.log(keyCode + ": UpVolume");
  240. fireKeyEvent(player_main, "keydown", KEYS.UP);
  241. break;
  242.  
  243. case G.DownVolume:
  244. console.log(keyCode + ": DownVolume");
  245. fireKeyEvent(player_main, "keydown", KEYS.DOWN);
  246. break;
  247.  
  248. case G.PrevSong:
  249. console.log(keyCode + ": PrevSong");
  250. fireKeyEvent(player_main, "keydown", KEYS.LEFT);
  251. break;
  252.  
  253. case G.NextSong:
  254. console.log(keyCode + ": NextSong");
  255. fireKeyEvent(player_main, "keydown", KEYS.RIGHT);
  256. break;
  257.  
  258. default:
  259. break;
  260. }
  261. }
  262.  
  263. function hide_sidebutton(){
  264. var style = `
  265. @media only screen and (max-height: 500px) {
  266. #sidebutton {
  267. display: none;
  268. }
  269. }
  270. `;
  271.  
  272. addStyle(style);
  273. }
  274. }
  275.  
  276. function OnlinePlayer() {
  277. playerHQ();
  278. addShortcutKeySwitch();
  279. onKeyDown();
  280.  
  281.  
  282. function playerHQ() {
  283. var timeout = 2000;
  284. setTimeout(function () {
  285. const elHQ = document.getElementById("J_playerHQ");
  286. if (elHQ) {
  287. elHQ.click();
  288. closeDialog_clt();
  289. }
  290. }, timeout);
  291. }
  292.  
  293. // 当点击切换音质时,出现付费提示,自动关闭它
  294. function closeDialog_clt() {
  295. var timeout = 500;
  296. setTimeout(function () {
  297. const el_dialog_clt = document.getElementById("dialog_clt");
  298. // 官方方法
  299. closedialog();
  300. }, timeout);
  301. }
  302.  
  303.  
  304. function addShortcutKeySwitch() {
  305. var timeout = 1000;
  306. setTimeout(function () {
  307. const el = document.querySelector(".player-controls");
  308. if (el) {
  309. const elCheckbox = document.createElement("lable");
  310. elCheckbox.innerHTML =
  311. '<input type="checkbox" name="shortchut_key" id="mjz_shortcutkeyswitch" checked="true">快捷键';
  312.  
  313. el.appendChild(elCheckbox);
  314. }
  315. }, timeout);
  316. }
  317. function isShortcutKey() {
  318. const elSwitch = document.getElementById("mjz_shortcutkeyswitch");
  319. if (elSwitch) {
  320. return elSwitch.checked;
  321. }
  322. return true;
  323. }
  324.  
  325. function onKeyDown() {
  326. document.onkeydown = function (event) {
  327. var e = event || window.event || arguments.callee.caller.arguments[0];
  328. if (e && isShortcutKey()) {
  329. handleKeyDown(e.keyCode);
  330. }
  331. };
  332. }
  333.  
  334. function handleKeyDown(keyCode) {
  335. const player_main = document.getElementById("player-main");
  336. switch (keyCode) {
  337. case G.UpVolume:
  338. console.log(keyCode + ": UpVolume");
  339. fireKeyEvent(player_main, "keydown", KEYS.UP);
  340. break;
  341.  
  342. case G.DownVolume:
  343. console.log(keyCode + ": DownVolume");
  344. fireKeyEvent(player_main, "keydown", KEYS.DOWN);
  345. break;
  346.  
  347. case G.PrevSong:
  348. console.log(keyCode + ": PrevSong");
  349. fireKeyEvent(player_main, "keydown", KEYS.LEFT);
  350. break;
  351.  
  352. case G.NextSong:
  353. console.log(keyCode + ": NextSong");
  354. fireKeyEvent(player_main, "keydown", KEYS.RIGHT);
  355. break;
  356.  
  357. default:
  358. break;
  359. }
  360. }
  361.  
  362.  
  363. }
  364.  
  365. // Usage: fireKeyEvent(input元素, 'keydown', 13);
  366. // http://blog.csdn.net/lovelyelfpop/article/details/52471878
  367. function fireKeyEvent(el, evtType, keyCode) {
  368. var doc = el.ownerDocument;
  369. var win = doc.defaultView || doc.parentWindow,
  370. evtObj;
  371. if (doc.createEvent) {
  372. if (win.KeyEvent) {
  373. evtObj = doc.createEvent('KeyEvents');
  374. evtObj.initKeyEvent( evtType, true, true, win, false, false, false, false, keyCode, 0 );
  375. }
  376. else {
  377. evtObj = doc.createEvent('UIEvents');
  378. Object.defineProperty(evtObj, 'keyCode', {
  379. get : function () { return this.keyCodeVal; }
  380. });
  381. Object.defineProperty(evtObj, 'which', {
  382. get : function () { return this.keyCodeVal; }
  383. });
  384. evtObj.initUIEvent( evtType, true, true, win, 1 );
  385. evtObj.keyCodeVal = keyCode;
  386. if (evtObj.keyCode !== keyCode) {
  387. console.log("keyCode " + evtObj.keyCode + " 和 (" + evtObj.which + ") 不匹配");
  388. }
  389. }
  390. el.dispatchEvent(evtObj);
  391. }
  392. else if (doc.createEventObject) {
  393. evtObj = doc.createEventObject();
  394. evtObj.keyCode = keyCode;
  395. el.fireEvent('on' + evtType, evtObj);
  396. }
  397. }
  398.  
  399. function eventFire(el, eType){
  400. if (el.fireEvent) {
  401. el.fireEvent('on' + eType);
  402. } else {
  403. var evObj = document.createEvent('Events');
  404. evObj.initEvent(eType, true, false);
  405. el.dispatchEvent(evObj);
  406. }
  407. }
  408.  
  409. function matchURL(url) {
  410. const URL = window.location.href; return URL.indexOf(url) > -1;
  411. }
  412.  
  413. function addStyle(styleContent) {
  414. var elStyle = document.createElement("style"); elStyle.innerHTML = styleContent; document.head.appendChild(elStyle);
  415. }

QingJ © 2025

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