]>
Commit | Line | Data |
---|---|---|
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, prev, data; | |
10 | var hash_to_id = {}, inhibit_handle_hash = false; | |
11 | var hist = [] | |
12 | ||
13 | function load_song (id) { | |
14 | audio.style.display = "inline"; | |
15 | var song = data[id]; | |
16 | var old_sources = document.getElementsByTagName("source"); | |
17 | while(old_sources.length) | |
18 | old_sources[0].parentNode.removeChild(old_sources[0]); | |
19 | ||
20 | for (var i = 0 ; i < song.formats.length ; i++){ | |
21 | var source = document.createElement("source"); | |
22 | var type = TYPES[song.formats[i].format]; | |
23 | source.setAttribute("type", type); | |
24 | source.setAttribute("src", song.formats[i].file); | |
25 | audio.appendChild(source); | |
26 | } | |
27 | ||
28 | details.innerHTML = "Now playing: " + song.artist + " - " + song.title; | |
29 | inhibit_handle_hash = true; | |
30 | location.hash = song.hash; | |
31 | inhibit_handle_hash = false; | |
32 | audio.load(); | |
33 | } | |
34 | ||
35 | function play_random () { | |
36 | start.innerHTML = "Next"; | |
37 | var id = Math.floor(Math.random() * data.length); | |
38 | hist.push(id); | |
39 | if(hist.length > 1) | |
40 | prev.disabled = false; | |
41 | load_song(id); | |
42 | audio.play(); | |
43 | } | |
44 | ||
45 | function play_random_after_error () { | |
46 | hist.pop(); /* Purge offending song from history */ | |
47 | play_random(); | |
48 | } | |
49 | ||
50 | function play_prev () { | |
51 | hist.pop(); | |
52 | var song = hist[hist.length - 1]; | |
53 | console.log("Will now play: " + song) | |
54 | if(hist.length <= 1) | |
55 | prev.disabled = true; | |
56 | load_song(song); | |
57 | audio.play(); | |
58 | } | |
59 | ||
60 | function handle_hash(first_run){ | |
61 | if(!hash_to_id.hasOwnProperty(location.hash) || inhibit_handle_hash) | |
62 | return; | |
63 | var id = hash_to_id[location.hash] | |
64 | if(first_run === true) | |
65 | hist.push(id) | |
66 | load_song(id); | |
67 | start.innerHTML = "Next"; | |
68 | audio.play(); | |
69 | } | |
70 | ||
71 | window.onload = function () { | |
72 | var container = document.getElementById("player"); | |
73 | container.innerHTML = '<div id="details"></div> <button id="prev_player">Previous</button><button id="start_player">Play a random song</button> (or click a song title)<br><audio id="audio" controls></audio>'; | |
74 | audio = document.getElementById("audio"); | |
75 | details = document.getElementById("details"); | |
76 | start = document.getElementById("start_player"); | |
77 | prev = document.getElementById("prev_player") | |
78 | prev.disabled = true; | |
79 | ||
80 | data = []; | |
81 | var trs = document.querySelectorAll("tbody tr"); | |
82 | for (var i = 0 ; i < trs.length ; i++) { | |
83 | var tr = trs[i]; | |
84 | var song = { | |
85 | "artist": tr.getElementsByClassName("artist")[0].textContent, | |
86 | "title": tr.getElementsByClassName("title")[0].textContent, | |
87 | "hash": tr.getElementsByTagName("a")[0].dataset.hash, | |
88 | "formats": [] | |
89 | }; | |
90 | var formats = tr.getElementsByClassName("formats")[0].getElementsByTagName("a"); | |
91 | for (var j = 0 ; j < formats.length ; j++) { | |
92 | var format = formats[j]; | |
93 | song.formats.push({ | |
94 | "format": format.textContent, | |
95 | "file": format.getAttribute("href") | |
96 | }); | |
97 | } | |
98 | data.push(song); | |
99 | hash_to_id[song.hash] = i; | |
100 | } | |
101 | ||
102 | audio.style.display = "none"; | |
103 | audio.addEventListener('ended', play_random); | |
104 | audio.addEventListener('error', play_random_after_error); | |
105 | start.addEventListener('click', play_random); | |
106 | prev.addEventListener('click', play_prev); | |
107 | window.onhashchange = handle_hash; | |
108 | handle_hash(true); | |
109 | }; |