☰

NPR.org HTML5 player

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

  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.04.14
  7. // @grant       GM_addStyle
  8. // @run-at      document-start
  9. // @icon        http://i.imgur.com/2qswvLC.png
  10. // ==/UserScript==
  11.  
  12. // https://api.npr.org/query?id=466555217&format=json&apiKey=MDAzMzQ2MjAyMDEyMzk4MTU1MDg3ZmM3MQ010
  13.  
  14. // http://www.npr.org/player/v2/mediaPlayer.html?action=1&t=1&islist=false&id=466555217&m=468149502
  15. // http://www.npr.org/player/v2/mediaPlayer.html?action=1&t=1&islist=false&id=468901493&m=468940337
  16. // http://www.npr.org/player/v2/mediaPlayer.html?action=1&t=1&islist=false&id=468933562&m=469337177&live=1
  17. // http://www.npr.org/player/v2/mediaPlayer.html?action=2&t=1&islist=false&id=469027281&m=469383445
  18.  
  19. /* if there's no ID just redirect to this neat HTML5 page with 24h news */
  20. try
  21. {
  22.   id = location.search.split('id=')[1].split('&')[0];
  23. }
  24. catch(e)
  25. {
  26.   location.href = 'https://npr.today';
  27. }
  28.  
  29. window.xhr = new XMLHttpRequest();
  30. xhr.open('GET', 'https://api.npr.org/query?id=' + id + '&format=json&apiKey=MDAzMzQ2MjAyMDEyMzk4MTU1MDg3ZmM3MQ010');
  31. xhr.responseType = 'json';
  32. xhr.onload = function(e)
  33. {
  34.   console.log(this.response);
  35.  
  36.   container = document.createElement("fieldset");
  37.   divholder = document.createElement("article");
  38.   selector = document.createElement("select");
  39.   aplayer = document.createElement("audio");
  40.  
  41.   /* replace the Flash warning with our HTML5 player */
  42.   flash_sucks = document.querySelector('#homepageFlash, body');
  43.   flash_sucks.parentElement.replaceChild(container, flash_sucks);
  44.  
  45.   /* add our visible title */
  46.   legend = document.createElement("legend");
  47.   legend.textContent = this.response.list.story[0].title.$text;
  48.  
  49.   /* set a related image in the left side */
  50.   divholder.style.backgroundImage = "url(" + this.response.list.story[0].image[0].src + ")";
  51.  
  52.   /* set a default song */
  53.   aplayer.controls = true;
  54.  
  55.   /* ten songs seen at once */
  56.   selector.size = 10;
  57.  
  58.   audios=this.response.list.story[0].audio;
  59.  
  60.   /* fill out the list box with the tracklist */
  61.   for(var entry in audios)
  62.   {
  63.     console.log("=> ", entry % 11, audios[entry]);
  64.  
  65.     elem = document.createElement("option");
  66.     elem.value = audios[entry].title.$text;
  67.     
  68.     len = audios[entry].duration.$text;
  69.     
  70.     len = (len / 60|0) + ":" + ('00' + (len % 60 | 0)).substr(-2);
  71.     
  72.  
  73.     selector.add(new Option(((entry|0) + 1) + ". " + audios[entry].title.$text + " — " + len, entry));
  74.   }
  75.  
  76.   container.appendChild(legend);
  77.   container.appendChild(divholder);
  78.   
  79.   divholder.appendChild(selector);
  80.   divholder.appendChild(aplayer);
  81.   
  82.   /* play the sound track selected in the list box */
  83.   selector.onchange = function(e)
  84.   {
  85.     index = e.explicitOriginalTarget.value;
  86.     
  87.     console.log("(*)", e, xhr.response.list.story[0].audio[index].format.mp3[0].$text);
  88.  
  89.     aplayer.src = xhr.response.list.story[0].audio[index].format.mp3[0].$text;
  90.     aplayer.play();
  91.   };
  92.  
  93.   /* skip to the next song/audio in the playlist once the current one has finished */
  94.   aplayer.addEventListener('ended', function(e)
  95.   {
  96.     console.log("(/)", e, selector.value, ((selector.value|0) + 1), (selector.options.length), ((selector.value|0) + 1) % (selector.options.length) );
  97.  
  98.     /* don't do anything if there's just a single item */
  99.     if (selector.length <= 1)
  100.       return;
  101.  
  102.     /* wrap around with the modulo operator looping back last->first */
  103.     //selector.value++; //selector %= selector.options.length;
  104.     selector.value = ((selector.value|0) + 1) % selector.options.length;
  105.     
  106.     console.log(selector.value, selector.options[selector.value]);
  107.     
  108.     /* as stupid as it looks like, javascript is a flaming pit of madness */
  109.     selector.onchange({explicitOriginalTarget: selector.options[selector.value]});
  110.   });
  111.   
  112.   /* autostart from the first song */
  113.   selector.options[0].selected = true;
  114.   selector.onchange({explicitOriginalTarget: selector.options[0]});
  115. };
  116.  
  117. xhr.send();
  118.  
  119. GM_addStyle("audio, select {display:block; width:100%;} \
  120.                    article {padding-left:240px; background-size: 240px auto; background-repeat: no-repeat;} \
  121.                     legend {font-size: medium; padding: 5px; color: #4067b2; background: #EBEBEB url('http://media.npr.org/chrome/news/npr-home.png') repeat-y scroll 0px 0px / 88px auto; padding-left: 93px; left: -88px; background-position: left bottom; margin-left: 152px;} \
  122.                          * {font-family: 'Gotham SSm',Helvetica,Arial,sans-serif !important;} \
  123.   @media(max-width: 480px) {article {padding-left:0}  legend {margin-left:0}}");
  124.  
  125. /* will this generated stylesheet used in the main site last? who knows */
  126. document.querySelector("link[rel=stylesheet]").href = 'https://s.npr.org/templates/css/generated/fingerprint/persistent-73cb243d716b971f095c14e7dfdb3432d2ecb623.css';