neale
/
playlist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add 2024, now you can have notes

This commit is contained in:
Neale Pickett 2024-03-16 15:34:59 -06:00
parent fed08c9126
commit afbe099af0
3 changed files with 81 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
2024.html Normal file
View File

@ -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">[On] The Summer Set B</li>
<li data-filename="Rise, Rise 67 no applause.mp3">[ ] Rise, Rise</li>
<li>Maria</li>
<li data-filename="21 The Four Masters 108.m4a">[On] Four Masters</li>
<li data-filename="Wellerman_Slow_3_versesFast(1).mp3">[ ] Wellerman</li>
<li data-filename="03 Scotch Cap _ Road to Lisdoonvarna (single Jigs).m4a">[On] Scotch Cap</li>
<li data-filename="Fling-Maggie Pickens Long (add 32).mp3">[ ] Maggie/Broom</li>
<li data-filename="09 Breaking Up Christmas.m4a">[ ] Breaking Up Christmas</li>
<li data-filename="02 Antics.m4a">[On] Antics</li>
<li data-filename="The Chain (short for Adraic) .mp3">[On] The Chain</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">[CUE] Time</li>
<li data-filename="Gypsy Jig Short.mp3">[On] Gypsy</li>
<li data-filename="02 Jama (based on the traditional tunes _Fig for a Kiss_ and _Langstrom's Pony_.mp3">[ ] Jama</li>
<li data-filename="Soggy's Lensic .mp3">[ ] Donegal Slip</li>
<li data-filename="St. Patrick's Day 85 IstRLSetRstRL.mp3">[On] St. Patrick's Day</li>
<li>Maria</li>
<li data-filename="01 Boondoggle.mp3">[On] Boondoggle</li>
</ol>
</body>
</html>

3
playlist.css
View File

@ -33,10 +33,11 @@ audio {
#controls a {
font-size: 200%;
padding: 0.5em;
cursor: default;
}
#playlist {
font-size: 150%;
font-size: 130%;
width: auto;
cursor: pointer;
}

13
playlist.mjs
View File

@ -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")
})