... |
... |
@@ -1,28 +1,15 @@ |
1 |
1 |
{{html}} |
2 |
|
-<select id="tracklist" onchange="changeTrack(this)"> |
3 |
|
- <option value="">🎵 Select a track...</option> |
4 |
|
- <option value="/bin/download/Pro%20White%20Music/01%20-%20Shit%20out.mp3">01 - Shit Out</option> |
5 |
|
- <option value="/bin/download/Pro%20White%20Music/02%20-%20Pride%20and%20tradition.mp3">02 - Pride and Tradition</option> |
6 |
|
- <option value="/bin/download/Pro%20White%20Music/03%20-%20Land%20of%20the%20White.mp3">03 - Land of the White</option> |
7 |
|
- <option value="/bin/download/Pro%20White%20Music/04%20-%20Saturday%20night.mp3">04 - Saturday Night</option> |
8 |
|
- <!-- etc --> |
9 |
|
-</select> |
|
2 |
+<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" /> |
|
3 |
+<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script> |
10 |
10 |
|
11 |
|
-<br><br> |
|
5 |
+<audio id="player" controls style="width:100%;"> |
|
6 |
+ <source src="/bin/download/Pro%20White%20Music/01%20-%20Shit%20out.mp3" type="audio/mp3" /> |
|
7 |
+</audio> |
12 |
12 |
|
13 |
|
-<div id="playerarea"> |
14 |
|
- <audio controls style="width: 100%;"> |
15 |
|
- <source src="" type="audio/mpeg"> |
16 |
|
- Your browser does not support the audio element. |
17 |
|
- </audio> |
18 |
|
-</div> |
19 |
|
- |
20 |
20 |
<script> |
21 |
|
-function changeTrack(select) { |
22 |
|
- var src = select.value; |
23 |
|
- var playerArea = document.getElementById('playerarea'); |
24 |
|
- playerArea.innerHTML = '<audio controls style="width:100%;"><source src="' + src + '" type="audio/mpeg">Your browser does not support the audio element.</audio>'; |
25 |
|
-} |
|
10 |
+document.addEventListener('DOMContentLoaded', () => { |
|
11 |
+ const player = new Plyr('#player'); |
|
12 |
+}); |
26 |
26 |
</script> |
27 |
27 |
{{/html}} |
28 |
28 |
|