Compare commits
2 Commits
8a5083cc94
...
72741a64d1
| Author | SHA1 | Date |
|---|---|---|
 Neale Pickett
|
72741a64d1 | |
|
Neale Pickett
|
1e6d95c609 |
|
|
@ -3,7 +3,7 @@
|
|||
<!-- https://github.com/nealey/playlist -->
|
||||
<html>
|
||||
<head>
|
||||
<title>ROF 2023-A</title>
|
||||
<title>ROF 2023 17:00</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link href="playlist.css" rel="stylesheet">
|
||||
<script src="playlist.mjs" type="module"></script>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</datalist>
|
||||
|
||||
<div id="currentTime"></div>
|
||||
<div id="duration"></div>
|
||||
<div id="remainingTime"></div>
|
||||
|
||||
<div id="controls">
|
||||
<a id="prev">⏮</a>
|
||||
|
|
@ -47,8 +47,8 @@
|
|||
<li>07 Geantraí.mp3</li>
|
||||
<li>15 The Sweets of May (Ceili).mp3</li>
|
||||
<li>Ni Liom Fein - 121.mp3</li>
|
||||
<li>St Patrick's Day Long -Maria Jones.mp3</li>
|
||||
<li>--- Maria ---</li>
|
||||
<li>--- St Patrick's Day---</li>
|
||||
<li>2-05 Wellerman – Sea Shanty.m4a</li>
|
||||
<li>01 Boogie Woogie Bugle Boy.m4a</li>
|
||||
<li>Amsterdam Blues Extra A Original.mp3</li>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!-- https://github.com/nealey/playlist -->
|
||||
<html>
|
||||
<head>
|
||||
<title>ROF 2023-B</title>
|
||||
<title>ROF 2023 18:30</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link href="playlist.css" rel="stylesheet">
|
||||
<script src="playlist.mjs" type="module"></script>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</datalist>
|
||||
|
||||
<div id="currentTime"></div>
|
||||
<div id="duration"></div>
|
||||
<div id="remainingTime"></div>
|
||||
|
||||
<div id="controls">
|
||||
<a id="prev">⏮</a>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<li>21 Planxty Davis 108.m4a</li>
|
||||
<li>04 The Jura Wedding Reels.m4a</li>
|
||||
<li>--- Maria ---</li>
|
||||
<li>--- St Patrick's Day---</li>
|
||||
<li>St Patrick's Day Long -Maria Jones.mp3</li>
|
||||
<li>09 Taylor Bar, 4am _ Ceol Na Mara.m4a</li>
|
||||
<li>15 The Sweets of May (Ceili).mp3</li>
|
||||
<li>Ni Liom Fein - 121.mp3</li>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
package main
|
||||
|
||||
import (
|
||||
"log"
|
||||
"net/http"
|
||||
)
|
||||
|
||||
func main() {
|
||||
listen := ":8080"
|
||||
log.Println("Listening on", listen)
|
||||
log.Fatal(http.ListenAndServe(listen, http.FileServer(http.Dir("."))))
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@ audio {
|
|||
font-family: "Roboto", "Droid Sans Mono", monospace;
|
||||
}
|
||||
|
||||
#duration {
|
||||
#remainingTime {
|
||||
clear: both;
|
||||
background-color: #001;
|
||||
float: right;
|
||||
|
|
@ -36,6 +36,7 @@ audio {
|
|||
}
|
||||
|
||||
#playlist {
|
||||
font-size: 150%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
|
@ -59,4 +60,8 @@ audio {
|
|||
}
|
||||
.fin {
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: #555;
|
||||
}
|
||||
|
|
|
|||
42
playlist.mjs
42
playlist.mjs
|
|
@ -39,8 +39,7 @@ class Playlist {
|
|||
this.base = base
|
||||
this.list = {}
|
||||
this.current = null
|
||||
this.startedAt = 0
|
||||
this.pausedAt = 0
|
||||
this.Stop()
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -78,7 +77,7 @@ class Playlist {
|
|||
if (!duration) {
|
||||
return 0
|
||||
}
|
||||
if (this.startedAt) {
|
||||
if (this.Playing()) {
|
||||
pos = ctx.currentTime - this.startedAt
|
||||
pos = Math.min(pos, duration)
|
||||
}
|
||||
|
|
@ -96,7 +95,6 @@ class Playlist {
|
|||
this.source.connect(ctx.destination)
|
||||
this.source.start(0, offset)
|
||||
this.startedAt = ctx.currentTime - offset
|
||||
this.pausedAt = 0
|
||||
}
|
||||
|
||||
Pause() {
|
||||
|
|
@ -111,11 +109,19 @@ class Playlist {
|
|||
this.source.stop()
|
||||
}
|
||||
this.pausedAt = 0
|
||||
this.startedAt = 0
|
||||
this.startedAt = -1
|
||||
}
|
||||
|
||||
Playing() {
|
||||
if (this.startedAt > -1) {
|
||||
let pos = ctx.currentTime - this.startedAt
|
||||
return pos < this.Duration()
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
PlayPause() {
|
||||
if (this.startedAt) {
|
||||
if (this.Playing()) {
|
||||
this.Pause()
|
||||
} else {
|
||||
this.Play()
|
||||
|
|
@ -123,16 +129,16 @@ class Playlist {
|
|||
}
|
||||
|
||||
Seek(pos) {
|
||||
if (this.startedAt) {
|
||||
this.play(pos)
|
||||
if (this.Playing()) {
|
||||
this.Play(pos)
|
||||
} else {
|
||||
this.pausedAt = this.Duration() * pos
|
||||
}
|
||||
}
|
||||
|
||||
CurrentTime() {
|
||||
if (this.startedAt) {
|
||||
return ctx.currentTime - this.startedAt
|
||||
if (this.Playing()) {
|
||||
return Math.min(ctx.currentTime - this.startedAt, this.Duration())
|
||||
}
|
||||
if (this.pausedAt) {
|
||||
return this.pausedAt
|
||||
|
|
@ -209,17 +215,19 @@ function volumechange(e) {
|
|||
function timeupdate() {
|
||||
let currentTime = playlist.CurrentTime() * Second
|
||||
let duration = playlist.Duration() * Second
|
||||
let tgt = document.querySelector("#currentTime")
|
||||
let cur = document.querySelector("#currentTime")
|
||||
let remain = document.querySelector("#remainingTime")
|
||||
let pos = document.querySelector("#pos")
|
||||
|
||||
pos.value = currentTime / duration
|
||||
|
||||
tgt.textContent = mmss(currentTime)
|
||||
cur.textContent = mmss(currentTime)
|
||||
if (duration - currentTime < 20 * Second) {
|
||||
tgt.classList.add("fin")
|
||||
cur.classList.add("fin")
|
||||
} else {
|
||||
tgt.classList.remove("fin")
|
||||
cur.classList.remove("fin")
|
||||
}
|
||||
remain.textContent = mmss(duration - currentTime)
|
||||
}
|
||||
|
||||
function setPos(e) {
|
||||
|
|
@ -319,8 +327,12 @@ function run() {
|
|||
audio.addEventListener("ended", ended)
|
||||
audio.addEventListener("volumechange", volumechange)
|
||||
for (let li of document.querySelectorAll("#playlist li")) {
|
||||
playlist.Add(li.textContent)
|
||||
li.classList.add("loading")
|
||||
li.addEventListener("click", loadTrack)
|
||||
playlist.Add(li.textContent)
|
||||
.then(() => {
|
||||
li.classList.remove("loading")
|
||||
})
|
||||
}
|
||||
|
||||
setInterval(() => timeupdate(), 250 * Millisecond)
|
||||
|
|
|
|||
Loading…
Reference in New Issue