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;
|
clear: both;
|
||||||
background-color: #001;
|
background-color: #001;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 500%;
|
font-size: 1000%;
|
||||||
font-family: "Roboto", "Droid Sans Mono", monospace;
|
font-family: "Roboto", "Droid Sans Mono", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -33,10 +33,11 @@ audio {
|
||||||
#controls a {
|
#controls a {
|
||||||
font-size: 200%;
|
font-size: 200%;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#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