Compare commits
2 Commits
fed08c9126
...
2e19748456
| Author | SHA1 | Date |
|---|---|---|
 Neale Pickett
|
2e19748456 | |
|
Neale Pickett
|
afbe099af0 |
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- HTML5 Playlist by Neale Pickett -->
|
||||
<!-- https://github.com/nealey/playlist -->
|
||||
<html>
|
||||
<head>
|
||||
<title>ROF 2024</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link href="playlist.css" rel="stylesheet">
|
||||
<script src="playlist.mjs" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<audio preload id="audio">
|
||||
Your browser does not support HTML5 Audio!
|
||||
</audio>
|
||||
<input type="range" min="0.0" max="1.0" list="audiopos" step="any" id="pos">
|
||||
<datalist id="audiopos">
|
||||
<option value="0.1"></option>
|
||||
<option value="0.2"></option>
|
||||
<option value="0.3"></option>
|
||||
<option value="0.4"></option>
|
||||
<option value="0.5"></option>
|
||||
<option value="0.6"></option>
|
||||
<option value="0.7"></option>
|
||||
<option value="0.8"></option>
|
||||
<option value="0.9"></option>
|
||||
</datalist>
|
||||
|
||||
<div id="currentTime"></div>
|
||||
<div id="remainingTime"></div>
|
||||
|
||||
<div id="controls">
|
||||
<a id="prev">⏮</a>
|
||||
<a id="next">⏭</a>
|
||||
<a id="pause">⏸️</a>
|
||||
<a id="play">▶️</a>
|
||||
|
||||
<input type="range" min="0.0" max="1.0" list="tickmarks" step="any" id="vol">
|
||||
<datalist id="tickmarks">
|
||||
<option value="0.0" label="0%">
|
||||
<option value="0.5" label="50%">
|
||||
<option value="1.0" label="100%">
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<ol id="playlist">
|
||||
<li data-filename="02 At the Edge.mp3">The Summer Set A [ ]</li>
|
||||
<li data-filename="01 Without a Care.mp3">The Summer Set B [On]</li>
|
||||
<li data-filename="Rise, Rise 67 no applause.mp3">Rise, Rise [ ]</li>
|
||||
<li>Maria - Kill Monitors!</li>
|
||||
<li data-filename="21 The Four Masters 108.m4a">Four Masters [On]</li>
|
||||
<li data-filename="Wellerman_Slow_3_versesFast(1).mp3">Wellerman [ ]</li>
|
||||
<li data-filename="03 Scotch Cap _ Road to Lisdoonvarna (single Jigs).m4a">Scotch Cap [On]</li>
|
||||
<li data-filename="Fling-Maggie Pickens Long (add 32).mp3">Maggie/Broom [ ]</li>
|
||||
<li data-filename="01 Breaking Up Christmas (edit).m4a">Breaking Up Christmas [ ]</li>
|
||||
<li data-filename="02 Antics.m4a">Antics [On]</li>
|
||||
<li data-filename="The Chain (short for Adraic) .mp3">The Chain [On]</li>
|
||||
<li data-filename="Star of the Sea Fade out.mp3">Star of the Sea [ ]</li>
|
||||
|
||||
<li>--- Intermission ---</li>
|
||||
|
||||
<li data-filename="Through the Ages Final edit mix 1.mp3">Decades [ ]</li>
|
||||
<li data-filename="Khruangbin - Time (You and I) (Official Video).mp3">Time [CUE]</li>
|
||||
<li data-filename="Gypsy Jig Short.mp3">Gypsy [On]</li>
|
||||
<li data-filename="02 Jama (based on the traditional tunes _Fig for a Kiss_ and _Langstrom's Pony_.mp3">Jama [ ] Fade @ 3:10</li>
|
||||
<li data-filename="Soggy's Lensic .mp3">Donegal Slip [ ]</li>
|
||||
<li data-filename="ElleryKleinRyan-StepIntotheBeat-18-StPatricksDay92.mp3">St. Patrick's Day [On]</li>
|
||||
<li>Maria - Kill Monitors!</li>
|
||||
<li data-filename="01 Boondoggle.mp3">Boondoggle [On]</li>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -23,7 +23,7 @@ audio {
|
|||
clear: both;
|
||||
background-color: #001;
|
||||
float: right;
|
||||
font-size: 500%;
|
||||
font-size: 1000%;
|
||||
font-family: "Roboto", "Droid Sans Mono", monospace;
|
||||
}
|
||||
|
||||
|
|
@ -33,10 +33,11 @@ audio {
|
|||
#controls a {
|
||||
font-size: 200%;
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#playlist {
|
||||
font-size: 150%;
|
||||
font-size: 130%;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
13
playlist.mjs
13
playlist.mjs
|
|
@ -65,9 +65,6 @@ class Playlist {
|
|||
async Load(filename) {
|
||||
this.Stop()
|
||||
this.current = this.list[filename]
|
||||
if (!this.current) {
|
||||
this.current = await this.add(filename)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -171,7 +168,7 @@ window.playlist = playlist
|
|||
async function loadTrack(e) {
|
||||
let li = e.target
|
||||
|
||||
playlist.Load(li.textContent)
|
||||
playlist.Load(li.dataset.filename || li.textContent)
|
||||
|
||||
// Update "current"
|
||||
for (let cur of document.querySelectorAll(".current")) {
|
||||
|
|
@ -275,7 +272,11 @@ function keydown(e) {
|
|||
case "ArrowUp": // Previous track
|
||||
prev()
|
||||
break
|
||||
|
||||
default:
|
||||
return
|
||||
}
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
function midiMessage(e) {
|
||||
|
|
@ -343,7 +344,9 @@ function run() {
|
|||
for (let li of document.querySelectorAll("#playlist li")) {
|
||||
li.classList.add("loading")
|
||||
li.addEventListener("click", loadTrack)
|
||||
playlist.Add(li.textContent)
|
||||
|
||||
let filename = li.dataset.filename || li.textContent
|
||||
playlist.Add(filename)
|
||||
.then(() => {
|
||||
li.classList.remove("loading")
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue