Add a rudimentary player

[app-musicexpo.git] / player.js

diff --git a/player.js b/player.js
new file mode 100644 (file)
index 0000000..bccc451
--- /dev/null
+++ b/player.js
@@ -0,0 +1,49 @@
+'use strict';
+var TYPES = {
+       "FLAC": "audio/x-flac",
+       "Vorbis": "audio/ogg",
+       "AAC": "audio/aac",
+       "MP3": "audio/mpeg"
+};
+
+var audio, details, start, data;
+
+function load_song (id) {
+       audio.style.display = "inline";
+       var song = data.files[id];
+       var old_sources = document.getElementsByTagName("source");
+       while(old_sources.length)
+               old_sources[0].parentNode.removeChild(old_sources[0]);
+
+       for (var i = 0 ; i < song.formats.length ; i++){
+               var source = document.createElement("source");
+               var type = TYPES[song.formats[i].format];
+               source.setAttribute("type", type);
+               source.setAttribute("src", data.prefix + song.formats[i].file);
+               audio.appendChild(source);
+       }
+
+       details.innerHTML = "Now playing: " + song.artist + " - " + song.title;
+       audio.load();
+}
+
+function play_random () {
+       start.innerHTML = "Next";
+       var id = Math.floor(Math.random() * data.files.length);
+       load_song(id);
+       audio.play();
+}
+
+window.onload = function () {
+       var container = document.getElementById("player");
+       container.innerHTML = '<div id="details"></div> <button id="start_player">Start player</button><br><audio id="audio" controls></audio>';
+       audio = document.getElementById("audio");
+       details = document.getElementById("details");
+       start = document.getElementById("start_player");
+
+       data = JSON.parse(document.getElementById("json").innerHTML);
+
+       audio.style.display = "none";
+       audio.addEventListener('ended', play_random);
+       start.addEventListener('click', play_random);
+};