372 lines
7.6 KiB
JavaScript
372 lines
7.6 KiB
JavaScript
let ctx = new AudioContext()
|
|
|
|
const Millisecond = 1
|
|
const Second = 1000 * Millisecond
|
|
const Minute = 60 * Second
|
|
|
|
class Track {
|
|
constructor() {
|
|
this.startedAt = false
|
|
this.pausedAt = 0
|
|
window.track = this
|
|
}
|
|
|
|
async Load(url) {
|
|
this.filename = url.split("/").pop()
|
|
let resp = await fetch(url)
|
|
if (resp.ok) {
|
|
let buf = await resp.arrayBuffer()
|
|
this.abuf = await ctx.decodeAudioData(buf)
|
|
} else {
|
|
let options = {
|
|
length: 1,
|
|
sampleRate: 3000,
|
|
}
|
|
this.abuf = new AudioBuffer(options)
|
|
}
|
|
}
|
|
|
|
Duration() {
|
|
if (this.abuf) {
|
|
return this.abuf.duration
|
|
}
|
|
return 0
|
|
}
|
|
}
|
|
|
|
class Playlist {
|
|
constructor(base="./music") {
|
|
this.base = base
|
|
this.list = {}
|
|
this.current = null
|
|
this.gain = new GainNode(ctx)
|
|
this.gain.connect(ctx.destination)
|
|
this.Stop()
|
|
}
|
|
|
|
/**
|
|
* Preload a track
|
|
*
|
|
* @param {String} filename
|
|
* @returns {Track}
|
|
*/
|
|
async Add(filename) {
|
|
let track = new Track()
|
|
this.list[filename] = track
|
|
await track.Load(`${this.base}/${filename}`)
|
|
return track
|
|
}
|
|
|
|
/**
|
|
* Load a track by filename
|
|
*
|
|
* @param {String} filename
|
|
*/
|
|
async Load(filename) {
|
|
this.Stop()
|
|
this.current = this.list[filename]
|
|
}
|
|
|
|
/**
|
|
* Returns current position as a percentage (0.0-1.0)
|
|
*/
|
|
Position() {
|
|
let duration = this.Duration()
|
|
let pos = 0
|
|
if (!duration) {
|
|
return 0
|
|
}
|
|
if (this.Playing()) {
|
|
pos = ctx.currentTime - this.startedAt
|
|
pos = Math.min(pos, duration)
|
|
}
|
|
return pos / duration
|
|
}
|
|
|
|
Play(pos=null) {
|
|
let offset = this.pausedAt
|
|
if (pos) {
|
|
offset = this.current.abuf.duration * pos
|
|
}
|
|
this.Stop()
|
|
this.source = new AudioBufferSourceNode(ctx)
|
|
this.source.buffer = this.current.abuf
|
|
this.source.connect(this.gain)
|
|
this.source.start(0, offset)
|
|
this.startedAt = ctx.currentTime - offset
|
|
}
|
|
|
|
Pause() {
|
|
let pos = this.CurrentTime()
|
|
this.Stop()
|
|
this.pausedAt = pos
|
|
}
|
|
|
|
Stop() {
|
|
if (this.source) {
|
|
this.source.disconnect()
|
|
this.source.stop()
|
|
}
|
|
this.pausedAt = 0
|
|
this.startedAt = false
|
|
}
|
|
|
|
Playing() {
|
|
if (this.startedAt !== false) {
|
|
let pos = ctx.currentTime - this.startedAt
|
|
return pos < this.Duration()
|
|
}
|
|
return false
|
|
}
|
|
|
|
Ended() {
|
|
if (this.startedAt !== false) {
|
|
let pos = ctx.currentTime - this.startedAt
|
|
return pos > this.Duration()
|
|
}
|
|
return false
|
|
}
|
|
|
|
PlayPause() {
|
|
if (this.Playing()) {
|
|
this.Pause()
|
|
} else {
|
|
this.Play()
|
|
}
|
|
}
|
|
|
|
Seek(pos) {
|
|
if (this.Playing()) {
|
|
this.Play(pos)
|
|
} else {
|
|
this.pausedAt = this.Duration() * pos
|
|
}
|
|
}
|
|
|
|
CurrentTime() {
|
|
if (this.Playing()) {
|
|
return Math.min(ctx.currentTime - this.startedAt, this.Duration())
|
|
}
|
|
if (this.pausedAt) {
|
|
return this.pausedAt
|
|
}
|
|
return 0
|
|
}
|
|
|
|
Duration() {
|
|
return this.current.Duration()
|
|
}
|
|
|
|
SetGain(value) {
|
|
this.gain.gain.value = value
|
|
}
|
|
}
|
|
|
|
let playlist = new Playlist()
|
|
window.playlist = playlist
|
|
|
|
async function loadTrack(e) {
|
|
let li = e.target
|
|
|
|
playlist.Load(li.dataset.filename || li.textContent)
|
|
|
|
// Update "current"
|
|
for (let cur of document.querySelectorAll(".current")) {
|
|
cur.classList.remove("current")
|
|
}
|
|
li.classList.add("current")
|
|
}
|
|
|
|
function clickOn(element) {
|
|
let e = new MouseEvent("click", {
|
|
view: window,
|
|
bubbles: true,
|
|
cancelable: true
|
|
})
|
|
element.dispatchEvent(e)
|
|
}
|
|
|
|
function prev() {
|
|
let cur = document.querySelector(".current")
|
|
let prev = cur.previousElementSibling
|
|
if (prev) {
|
|
cur = prev
|
|
}
|
|
clickOn(cur)
|
|
}
|
|
|
|
function play() {
|
|
if (!playlist.Playing()) {
|
|
playlist.Play()
|
|
}
|
|
}
|
|
|
|
function pause() {
|
|
playlist.Pause()
|
|
}
|
|
|
|
function next() {
|
|
let cur = document.querySelector(".current")
|
|
let next = cur.nextElementSibling
|
|
if (next) {
|
|
cur = next
|
|
}
|
|
clickOn(cur)
|
|
}
|
|
|
|
function mmss(duration) {
|
|
let mm = Math.floor(duration / Minute)
|
|
let ss = Math.floor((duration / Second) % 60)
|
|
|
|
if (ss < 10) {
|
|
ss = "0" + ss
|
|
}
|
|
return mm + ":" + ss
|
|
}
|
|
|
|
|
|
function update() {
|
|
let currentTime = playlist.CurrentTime() * Second
|
|
let duration = playlist.Duration() * Second
|
|
let cur = document.querySelector("#currentTime")
|
|
let remain = document.querySelector("#remainingTime")
|
|
let pos = document.querySelector("#pos")
|
|
|
|
pos.value = currentTime / duration
|
|
|
|
if (playlist.Ended()) {
|
|
next()
|
|
}
|
|
|
|
cur.textContent = mmss(currentTime)
|
|
if (duration - currentTime < 20 * Second) {
|
|
cur.classList.add("fin")
|
|
} else {
|
|
cur.classList.remove("fin")
|
|
}
|
|
remain.textContent = "-" + mmss(duration - currentTime)
|
|
}
|
|
|
|
function setPos(e) {
|
|
let val = e.target.value
|
|
playlist.Seek(val)
|
|
}
|
|
|
|
function setGain(e) {
|
|
let val = e.target.value
|
|
playlist.SetGain(val)
|
|
}
|
|
|
|
function keydown(e) {
|
|
let audio = document.querySelector("#audio")
|
|
|
|
switch (e.key) {
|
|
case " ": // space bar
|
|
playlist.PlayPause()
|
|
break
|
|
|
|
case "ArrowDown": // Next track
|
|
next()
|
|
break
|
|
|
|
case "ArrowUp": // Previous track
|
|
prev()
|
|
break
|
|
|
|
default:
|
|
return
|
|
}
|
|
e.preventDefault()
|
|
}
|
|
|
|
function midiMessage(e) {
|
|
let audio = document.querySelector("#audio")
|
|
let data = e.data
|
|
let ctrl = data[1]
|
|
let val = data[2]
|
|
if ((data[0] == 0xb0) || (data[0] == 0xbf)) {
|
|
switch (ctrl) {
|
|
case 0: // master volume slider
|
|
let volumeSlider = document.querySelector("#vol")
|
|
audio.volume = val / 127
|
|
volumeSlider.value = audio.volume
|
|
volumeSlider.dispatchEvent(new Event("input"))
|
|
break
|
|
case 41: // play button
|
|
if (val == 127) {
|
|
play()
|
|
}
|
|
break
|
|
case 42: // stop button
|
|
if (val == 127) {
|
|
playlist.Pause()
|
|
}
|
|
break
|
|
case 58: // prev button
|
|
if (val == 127) {
|
|
prev()
|
|
}
|
|
break
|
|
case 59: // next button
|
|
if (val == 127) {
|
|
next()
|
|
}
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleMidiAccess(access) {
|
|
for (let input of access.inputs.values()) {
|
|
input.addEventListener("midimessage", midiMessage)
|
|
}
|
|
|
|
for (let output of access.outputs.values()) {
|
|
if (output.name == "nanoKONTROL2 MIDI 1") {
|
|
output.send([0xf0, 0x42, 0x40, 0x00, 0x01, 0x13, 0x00, 0x00, 0x00, 0x01, 0xf7]); // Native Mode (lets us control LEDs, requires sysex privilege)
|
|
output.send([0xbf, 0x20, 0x7f]); // S0 LED on
|
|
output.send([0xbf, 0x29, 0x7f]); // Play LED on
|
|
}
|
|
}
|
|
}
|
|
|
|
function run() {
|
|
// Set up events:
|
|
// - Prev/Next buttons
|
|
// - ended / timeupdate events on audio
|
|
// - Track items
|
|
document.querySelector("#prev").addEventListener("click", prev)
|
|
document.querySelector("#pause").addEventListener("click", pause)
|
|
document.querySelector("#play").addEventListener("click", play)
|
|
document.querySelector("#next").addEventListener("click", next)
|
|
document.querySelector("#pos").addEventListener("input", setPos)
|
|
document.querySelector("#vol").addEventListener("input", setGain)
|
|
for (let li of document.querySelectorAll("#playlist li")) {
|
|
li.classList.add("loading")
|
|
li.addEventListener("click", loadTrack)
|
|
|
|
let filename = li.dataset.filename || li.textContent
|
|
playlist.Add(filename)
|
|
.then(() => {
|
|
li.classList.remove("loading")
|
|
})
|
|
}
|
|
|
|
setInterval(() => update(), 250 * Millisecond)
|
|
|
|
document.querySelector("#vol").value = audio.volume
|
|
|
|
// Bind keypress events
|
|
// - space: play/pause
|
|
//
|
|
document.addEventListener("keydown", keydown)
|
|
|
|
// Load up first track
|
|
document.querySelector("#playlist li").classList.add("current")
|
|
prev()
|
|
|
|
navigator.requestMIDIAccess({sysex: true}).then(handleMidiAccess)
|
|
}
|
|
|
|
window.addEventListener("load", run)
|