]>
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, data; | |
10 | var hash_to_id = {}, inhibit_handle_hash = false; | |
11 | ||
12 | function load_song (id) { | |
13 | audio.style.display = "inline"; | |
14 | var song = data[id]; | |
15 | var old_sources = document.getElementsByTagName("source"); | |
16 | while(old_sources.length) | |
17 | old_sources[0].parentNode.removeChild(old_sources[0]); | |
18 | ||
19 | for (var i = 0 ; i < song.formats.length ; i++){ | |
20 | var source = document.createElement("source"); | |
21 | var type = TYPES[song.formats[i].format]; | |
22 | source.setAttribute("type", type); | |
23 | source.setAttribute("src", song.formats[i].file); | |
24 | audio.appendChild(source); | |
25 | } | |
26 | ||
27 | details.innerHTML = "Now playing: " + song.artist + " - " + song.title; | |
28 | inhibit_handle_hash = true; | |
29 | location.hash = song.hash; | |
30 | inhibit_handle_hash = false; | |
31 | audio.load(); | |
32 | } | |
33 | ||
34 | function play_random () { | |
35 | start.innerHTML = "Next"; | |
36 | var id = Math.floor(Math.random() * data.length); | |
37 | load_song(id); | |
38 | audio.play(); | |
39 | } | |
40 | ||
41 | function handle_hash(){ | |
42 | if(!hash_to_id.hasOwnProperty(location.hash) || inhibit_handle_hash) | |
43 | return; | |
44 | load_song(hash_to_id[location.hash]); | |
45 | start.innerHTML = "Next"; | |
46 | audio.play(); | |
47 | } | |
48 | ||
49 | window.onload = function () { | |
50 | var container = document.getElementById("player"); | |
51 | 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>'; | |
52 | audio = document.getElementById("audio"); | |
53 | details = document.getElementById("details"); | |
54 | start = document.getElementById("start_player"); | |
55 | ||
56 | data = []; | |
57 | var trs = document.querySelectorAll("tbody tr"); | |
58 | for (var i = 0 ; i < trs.length ; i++) { | |
59 | var tr = trs[i]; | |
60 | var song = { | |
61 | "artist": tr.getElementsByClassName("artist")[0].textContent, | |
62 | "title": tr.getElementsByClassName("title")[0].textContent, | |
63 | "hash": tr.getElementsByTagName("a")[0].dataset.hash, | |
64 | "formats": [] | |
65 | }; | |
66 | var formats = tr.getElementsByClassName("formats")[0].getElementsByTagName("a"); | |
67 | for (var j = 0 ; j < formats.length ; j++) { | |
68 | var format = formats[j]; | |
69 | song.formats.push({ | |
70 | "format": format.textContent, | |
71 | "file": format.getAttribute("href") | |
72 | }); | |
73 | } | |
74 | data.push(song); | |
75 | hash_to_id[song.hash] = i; | |
76 | } | |
77 | ||
78 | audio.style.display = "none"; | |
79 | audio.addEventListener('ended', play_random); | |
80 | audio.addEventListener('error', play_random); | |
81 | start.addEventListener('click', play_random); | |
82 | window.onhashchange = handle_hash; | |
83 | handle_hash(); | |
84 | }; |