player.js

   1 'use strict';
   2 var TYPES = {
   3         "FLAC": "audio/x-flac",
   4         "Vorbis": "audio/ogg",
   5         "AAC": "audio/aac",
   6         "MP3": "audio/mpeg"
   7 };
   8
   9 var audio, details, start, data;
  10
  11 function load_song (id) {
  12         audio.style.display = "inline";
  13         var song = data[id];
  14         var old_sources = document.getElementsByTagName("source");
  15         while(old_sources.length)
  16                 old_sources[0].parentNode.removeChild(old_sources[0]);
  17
  18         for (var i = 0 ; i < song.formats.length ; i++){
  19                 var source = document.createElement("source");
  20                 var type = TYPES[song.formats[i].format];
  21                 source.setAttribute("type", type);
  22                 source.setAttribute("src", song.formats[i].file);
  23                 audio.appendChild(source);
  24         }
  25
  26         details.innerHTML = "Now playing: " + song.artist + " - " + song.title;
  27         audio.load();
  28 }
  29
  30 function play_random () {
  31         start.innerHTML = "Next";
  32         var id = Math.floor(Math.random() * data.length);
  33         load_song(id);
  34         audio.play();
  35 }
  36
  37 function make_onclick_handler (id){
  38         return function () {
  39                 load_song(id);
  40                 start.innerHTML = "Next";
  41                 audio.play();
  42         }
  43 }
  44
  45 window.onload = function () {
  46         var container = document.getElementById("player");
  47         container.innerHTML = '<div id="details"></div> <button id="start_player">Play a random song</button> (or click a song title)<br><audio id="audio" controls></audio>';
  48         audio = document.getElementById("audio");
  49         details = document.getElementById("details");
  50         start = document.getElementById("start_player");
  51
  52         data = [];
  53         var trs = document.querySelectorAll("tbody tr");
  54         for (var i = 0 ; i < trs.length ; i++) {
  55                 var tr = trs[i];
  56                 var song = {
  57                         "artist": tr.getElementsByClassName("artist")[0].textContent,
  58                         "title": tr.getElementsByClassName("title")[0].textContent,
  59                         "formats": []
  60                 };
  61                 var formats = tr.getElementsByClassName("formats")[0].getElementsByTagName("a");
  62                 for (var j = 0 ; j < formats.length ; j++) {
  63                         var format = formats[j];
  64                         song.formats.push({
  65                                 "format": format.textContent,
  66                                 "file": format.getAttribute("href")
  67                         });
  68                 }
  69                 data.push(song);
  70                 tr.getElementsByClassName("title")[0].onclick = make_onclick_handler(i);
  71         }
  72
  73         audio.style.display = "none";
  74         audio.addEventListener('ended', play_random);
  75         audio.addEventListener('error', play_random);
  76         start.addEventListener('click', play_random);
  77 };