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.files[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", data.prefix + 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.files.length);
  33         load_song(id);
  34         audio.play();
  35 }
  36
  37 window.onload = function () {
  38         var container = document.getElementById("player");
  39         container.innerHTML = '<div id="details"></div> <button id="start_player">Start player</button><br><audio id="audio" controls></audio>';
  40         audio = document.getElementById("audio");
  41         details = document.getElementById("details");
  42         start = document.getElementById("start_player");
  43
  44         data = JSON.parse(document.getElementById("json").textContent);
  45
  46         audio.style.display = "none";
  47         audio.addEventListener('ended', play_random);
  48         audio.addEventListener('error', play_random);
  49         start.addEventListener('click', play_random);
  50 };