Compare commits
No commits in common. "2e19748456c5dc3d0b3441f7a4801faddc9aca8b" and "fed08c912642825846bf2061ffc429598a385cb2" have entirely different histories.
2e19748456
...
fed08c9126
71
2024.html
71
2024.html
|
|
@ -1,71 +0,0 @@
|
||||||
<!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: 1000%;
|
font-size: 500%;
|
||||||
font-family: "Roboto", "Droid Sans Mono", monospace;
|
font-family: "Roboto", "Droid Sans Mono", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -33,11 +33,10 @@ audio {
|
||||||
#controls a {
|
#controls a {
|
||||||
font-size: 200%;
|
font-size: 200%;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#playlist {
|
#playlist {
|
||||||
font-size: 130%;
|
font-size: 150%;
|
||||||
width: auto;
|
width: auto;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
13
playlist.mjs
13
playlist.mjs
|
|
@ -65,6 +65,9 @@ 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)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -168,7 +171,7 @@ window.playlist = playlist
|
||||||
async function loadTrack(e) {
|
async function loadTrack(e) {
|
||||||
let li = e.target
|
let li = e.target
|
||||||
|
|
||||||
playlist.Load(li.dataset.filename || li.textContent)
|
playlist.Load(li.textContent)
|
||||||
|
|
||||||
// Update "current"
|
// Update "current"
|
||||||
for (let cur of document.querySelectorAll(".current")) {
|
for (let cur of document.querySelectorAll(".current")) {
|
||||||
|
|
@ -272,11 +275,7 @@ 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) {
|
||||||
|
|
@ -344,9 +343,7 @@ 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