Add 2024, now you can have notes
This commit is contained in:
parent
fed08c9126
commit
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">[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>
|
||||||
|
|
@ -33,10 +33,11 @@ audio {
|
||||||
#controls a {
|
#controls a {
|
||||||
font-size: 200%;
|
font-size: 200%;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
#playlist {
|
#playlist {
|
||||||
font-size: 150%;
|
font-size: 130%;
|
||||||
width: auto;
|
width: auto;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
13
playlist.mjs
13
playlist.mjs
|
|
@ -65,9 +65,6 @@ class Playlist {
|
||||||
async Load(filename) {
|
async Load(filename) {
|
||||||
this.Stop()
|
this.Stop()
|
||||||
this.current = this.list[filename]
|
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) {
|
async function loadTrack(e) {
|
||||||
let li = e.target
|
let li = e.target
|
||||||
|
|
||||||
playlist.Load(li.textContent)
|
playlist.Load(li.dataset.filename || li.textContent)
|
||||||
|
|
||||||
// Update "current"
|
// Update "current"
|
||||||
for (let cur of document.querySelectorAll(".current")) {
|
for (let cur of document.querySelectorAll(".current")) {
|
||||||
|
|
@ -275,7 +272,11 @@ function keydown(e) {
|
||||||
case "ArrowUp": // Previous track
|
case "ArrowUp": // Previous track
|
||||||
prev()
|
prev()
|
||||||
break
|
break
|
||||||
|
|
||||||
|
default:
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
e.preventDefault()
|
||||||
}
|
}
|
||||||
|
|
||||||
function midiMessage(e) {
|
function midiMessage(e) {
|
||||||
|
|
@ -343,7 +344,9 @@ function run() {
|
||||||
for (let li of document.querySelectorAll("#playlist li")) {
|
for (let li of document.querySelectorAll("#playlist li")) {
|
||||||
li.classList.add("loading")
|
li.classList.add("loading")
|
||||||
li.addEventListener("click", loadTrack)
|
li.addEventListener("click", loadTrack)
|
||||||
playlist.Add(li.textContent)
|
|
||||||
|
let filename = li.dataset.filename || li.textContent
|
||||||
|
playlist.Add(filename)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
li.classList.remove("loading")
|
li.classList.remove("loading")
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue