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

Compare commits

base: neale:72741a64d1938f58ba92bf3cf804c888ffb8bd5b
Branches Tags
neale:master
..
compare: neale:8a5083cc94161d57c6fa7f8ad9f6e156cab13486
Branches Tags
neale:master

No commits in common. "72741a64d1938f58ba92bf3cf804c888ffb8bd5b" and "8a5083cc94161d57c6fa7f8ad9f6e156cab13486" have entirely different histories.
72741a64d1 ... 8a5083cc94

6 changed files with 23 additions and 55 deletions
Show Stats Expand all files Collapse all files

6
2023-a.html
View File

@ -3,7 +3,7 @@
<!-- https://github.com/nealey/playlist --> <!-- https://github.com/nealey/playlist -->
<html> <html>
<head> <head>
<title>ROF 2023 17:00</title> <title>ROF 2023-A</title>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link href="playlist.css" rel="stylesheet"> <link href="playlist.css" rel="stylesheet">
<script src="playlist.mjs" type="module"></script> <script src="playlist.mjs" type="module"></script>
@ -26,7 +26,7 @@
</datalist> </datalist>
<div id="currentTime"></div> <div id="currentTime"></div>
<div id="remainingTime"></div> <div id="duration"></div>
<div id="controls"> <div id="controls">
<a id="prev">⏮</a> <a id="prev">⏮</a>
@ -47,8 +47,8 @@
<li>07 Geantraí.mp3</li> <li>07 Geantraí.mp3</li>
<li>15 The Sweets of May (Ceili).mp3</li> <li>15 The Sweets of May (Ceili).mp3</li>
<li>Ni Liom Fein - 121.mp3</li> <li>Ni Liom Fein - 121.mp3</li>
<li>St Patrick's Day Long -Maria Jones.mp3</li>
<li>--- Maria ---</li> <li>--- Maria ---</li>
<li>--- St Patrick's Day---</li>
<li>2-05 Wellerman – Sea Shanty.m4a</li> <li>2-05 Wellerman – Sea Shanty.m4a</li>
<li>01 Boogie Woogie Bugle Boy.m4a</li> <li>01 Boogie Woogie Bugle Boy.m4a</li>
<li>Amsterdam Blues Extra A Original.mp3</li> <li>Amsterdam Blues Extra A Original.mp3</li>

6
2023-b.html
View File

@ -3,7 +3,7 @@
<!-- https://github.com/nealey/playlist --> <!-- https://github.com/nealey/playlist -->
<html> <html>
<head> <head>
<title>ROF 2023 18:30</title> <title>ROF 2023-B</title>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link href="playlist.css" rel="stylesheet"> <link href="playlist.css" rel="stylesheet">
<script src="playlist.mjs" type="module"></script> <script src="playlist.mjs" type="module"></script>
@ -26,7 +26,7 @@
</datalist> </datalist>
<div id="currentTime"></div> <div id="currentTime"></div>
<div id="remainingTime"></div> <div id="duration"></div>
<div id="controls"> <div id="controls">
<a id="prev">⏮</a> <a id="prev">⏮</a>
@ -46,7 +46,7 @@
<li>21 Planxty Davis 108.m4a</li> <li>21 Planxty Davis 108.m4a</li>
<li>04 The Jura Wedding Reels.m4a</li> <li>04 The Jura Wedding Reels.m4a</li>
<li>--- Maria ---</li> <li>--- Maria ---</li>
<li>St Patrick's Day Long -Maria Jones.mp3</li> <li>--- St Patrick's Day---</li>
<li>09 Taylor Bar, 4am _ Ceol Na Mara.m4a</li> <li>09 Taylor Bar, 4am _ Ceol Na Mara.m4a</li>
<li>15 The Sweets of May (Ceili).mp3</li> <li>15 The Sweets of May (Ceili).mp3</li>
<li>Ni Liom Fein - 121.mp3</li> <li>Ni Liom Fein - 121.mp3</li>

12
cmd/playlist/main.go
View File

@ -1,12 +0,0 @@
package main
import (
"log"
"net/http"
)
func main() {
listen := ":8080"
log.Println("Listening on", listen)
log.Fatal(http.ListenAndServe(listen, http.FileServer(http.Dir("."))))
}

3
go.mod
View File

@ -1,3 +0,0 @@
module woozle.org/neale/playlist
go 1.18

9
playlist.css
View File

@ -19,7 +19,7 @@ audio {
font-family: "Roboto", "Droid Sans Mono", monospace; font-family: "Roboto", "Droid Sans Mono", monospace;
} }
#remainingTime { #duration {
clear: both; clear: both;
background-color: #001; background-color: #001;
float: right; float: right;
@ -36,7 +36,6 @@ audio {
} }
#playlist { #playlist {
font-size: 150%;
width: auto; width: auto;
} }
@ -60,8 +59,4 @@ audio {
} }
.fin { .fin {
animation: pulse 1s infinite; animation: pulse 1s infinite;
} }
.loading {
color: #555;
}

42
playlist.mjs
View File

@ -39,7 +39,8 @@ class Playlist {
this.base = base this.base = base
this.list = {} this.list = {}
this.current = null this.current = null
this.Stop() this.startedAt = 0
this.pausedAt = 0
} }
/** /**
@ -77,7 +78,7 @@ class Playlist {
if (!duration) { if (!duration) {
return 0 return 0
} }
if (this.Playing()) { if (this.startedAt) {
pos = ctx.currentTime - this.startedAt pos = ctx.currentTime - this.startedAt
pos = Math.min(pos, duration) pos = Math.min(pos, duration)
} }
@ -95,6 +96,7 @@ class Playlist {
this.source.connect(ctx.destination) this.source.connect(ctx.destination)
this.source.start(0, offset) this.source.start(0, offset)
this.startedAt = ctx.currentTime - offset this.startedAt = ctx.currentTime - offset
this.pausedAt = 0
} }
Pause() { Pause() {
@ -109,19 +111,11 @@ class Playlist {
this.source.stop() this.source.stop()
} }
this.pausedAt = 0 this.pausedAt = 0
this.startedAt = -1 this.startedAt = 0
}
Playing() {
if (this.startedAt > -1) {
let pos = ctx.currentTime - this.startedAt
return pos < this.Duration()
}
return false
} }
PlayPause() { PlayPause() {
if (this.Playing()) { if (this.startedAt) {
this.Pause() this.Pause()
} else { } else {
this.Play() this.Play()
@ -129,16 +123,16 @@ class Playlist {
} }
Seek(pos) { Seek(pos) {
if (this.Playing()) { if (this.startedAt) {
this.Play(pos) this.play(pos)
} else { } else {
this.pausedAt = this.Duration() * pos this.pausedAt = this.Duration() * pos
} }
} }
CurrentTime() { CurrentTime() {
if (this.Playing()) { if (this.startedAt) {
return Math.min(ctx.currentTime - this.startedAt, this.Duration()) return ctx.currentTime - this.startedAt
} }
if (this.pausedAt) { if (this.pausedAt) {
return this.pausedAt return this.pausedAt
@ -215,19 +209,17 @@ function volumechange(e) {
function timeupdate() { function timeupdate() {
let currentTime = playlist.CurrentTime() * Second let currentTime = playlist.CurrentTime() * Second
let duration = playlist.Duration() * Second let duration = playlist.Duration() * Second
let cur = document.querySelector("#currentTime") let tgt = document.querySelector("#currentTime")
let remain = document.querySelector("#remainingTime")
let pos = document.querySelector("#pos") let pos = document.querySelector("#pos")
pos.value = currentTime / duration pos.value = currentTime / duration
cur.textContent = mmss(currentTime) tgt.textContent = mmss(currentTime)
if (duration - currentTime < 20 * Second) { if (duration - currentTime < 20 * Second) {
cur.classList.add("fin") tgt.classList.add("fin")
} else { } else {
cur.classList.remove("fin") tgt.classList.remove("fin")
} }
remain.textContent = mmss(duration - currentTime)
} }
function setPos(e) { function setPos(e) {
@ -327,12 +319,8 @@ function run() {
audio.addEventListener("ended", ended) audio.addEventListener("ended", ended)
audio.addEventListener("volumechange", volumechange) audio.addEventListener("volumechange", volumechange)
for (let li of document.querySelectorAll("#playlist li")) { for (let li of document.querySelectorAll("#playlist li")) {
li.classList.add("loading")
li.addEventListener("click", loadTrack)
playlist.Add(li.textContent) playlist.Add(li.textContent)
.then(() => { li.addEventListener("click", loadTrack)
li.classList.remove("loading")
})
} }
setInterval(() => timeupdate(), 250 * Millisecond) setInterval(() => timeupdate(), 250 * Millisecond)