☰

NPR.org HTML5 player

Listen to NPR without having to install Flash, downloads, no ads.

目前為 2016-03-08 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        NPR.org HTML5 player
  3. // @description Listen to NPR without having to install Flash, downloads, no ads.
  4. // @namespace   https://greasyfork.org/users/4813-swyter
  5. // @match       *://www.npr.org/player/v2/mediaPlayer.html*
  6. // @version     2016.03.08
  7. // @grant       GM_addStyle
  8. // @run-at      document-start
  9. // ==/UserScript==
  10.  
  11. // https://api.npr.org/query?id=466555217&format=json&apiKey=MDAzMzQ2MjAyMDEyMzk4MTU1MDg3ZmM3MQ010
  12.  
  13. // http://www.npr.org/player/v2/mediaPlayer.html?action=1&t=1&islist=false&id=466555217&m=468149502
  14. // http://www.npr.org/player/v2/mediaPlayer.html?action=1&t=1&islist=false&id=468901493&m=468940337
  15. // http://www.npr.org/player/v2/mediaPlayer.html?action=1&t=1&islist=false&id=468933562&m=469337177&live=1
  16. // http://www.npr.org/player/v2/mediaPlayer.html?action=2&t=1&islist=false&id=469027281&m=469383445
  17.  
  18. if (!(id = location.search.split('id=')[1].split('&')[0]))
  19.   throw "Invalid identifier, it's not possible to guess what item we want.";
  20.  
  21. window.xhr = new XMLHttpRequest();
  22. xhr.open('GET', 'https://api.npr.org/query?id=' + id + '&format=json&apiKey=MDAzMzQ2MjAyMDEyMzk4MTU1MDg3ZmM3MQ010');
  23. xhr.responseType = 'json';
  24. xhr.onload = function(e)
  25. {
  26.   console.log(this.response);
  27.  
  28.   container = document.createElement("fieldset");
  29.   divholder = document.createElement("article");
  30.   selector = document.createElement("select");
  31.   aplayer = document.createElement("audio");
  32.  
  33.   flash_sucks = document.querySelector('#homepageFlash, body');
  34.   flash_sucks.parentElement.replaceChild(container, flash_sucks);
  35.  
  36.   legend = document.createElement("legend");
  37.   legend.textContent = this.response.list.story[0].title.$text;
  38.  
  39.   
  40.   divholder.style.backgroundImage = "url(" + this.response.list.story[0].image[0].src + ")";
  41.   aplayer.src=this.response.list.story[0].audio[0].format.mp3[0].$text;
  42.   aplayer.controls=true;
  43.  
  44.   selector.size=10;
  45.  
  46.   audios=this.response.list.story[0].audio;
  47.  
  48.   for(var entry in audios)
  49.   {
  50.     console.log("=> ", audios[entry]);
  51.  
  52.     elem = document.createElement("option");
  53.     elem.value = audios[entry].title.$text;
  54.     
  55.     len = audios[entry].duration.$text;
  56.     
  57.     len = (len / 60|0) + ":" + ('00' + (len % 60 | 0)).substr(-2);
  58.     
  59.  
  60.     selector.add(new Option((entry|0 + 1) + ". " + audios[entry].title.$text + " — " + len, entry));
  61.   }
  62.  
  63.   container.appendChild(legend);
  64.   container.appendChild(divholder);
  65.   
  66.   divholder.appendChild(selector);
  67.   divholder.appendChild(aplayer);
  68.   
  69.   document.addEventListener('change', function(e)
  70.   {
  71.     index = e.explicitOriginalTarget.value;
  72.     
  73.     console.log("(*)", e, xhr.response.list.story[0].audio[index].format.mp3[0].$text);
  74.  
  75.     aplayer.src = xhr.response.list.story[0].audio[index].format.mp3[0].$text;
  76.     aplayer.play();
  77.   });
  78. };
  79.  
  80. xhr.send();
  81.  
  82. GM_addStyle("audio, select {display:block; width:100%;} \
  83.                    article {padding-left:240px; background-size: 240px auto; background-repeat: no-repeat;} \
  84.                     legend {font-size: medium; padding: 5px; color: #4067b2; background: #EBEBEB url('http://media.npr.org/chrome/news/npr-home.png') no-repeat scroll 0px 0px / 88px auto; padding-left: 93px; left: -88px; background-position: left bottom; margin-left: 152px;} \
  85.                          * {font-family: 'Gotham SSm',Helvetica,Arial,sans-serif !important;}");
  86.  
  87. /* will this generated stylesheet used in the main site last? who knows */
  88. document.querySelector("link[rel=stylesheet]").href = 'https://s.npr.org/templates/css/generated/fingerprint/persistent-73cb243d716b971f095c14e7dfdb3432d2ecb623.css';