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

Turn on LEDs, display track duration

This commit is contained in:
Neale Pickett 2018-03-18 22:25:32 +00:00
parent 024a529386
commit 5134fb14d3
3 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
playlist.css
View File

@ -15,6 +15,14 @@ audio {
font-family: "Roboto", "Droid Sans Mono", monospace; font-family: "Roboto", "Droid Sans Mono", monospace;
} }
#duration {
clear: both;
background-color: #001;
float: right;
font-size: 500%;
font-family: "Roboto", "Droid Sans Mono", monospace;
}
#controls { #controls {
padding: 1em; padding: 1em;
} }

3
playlist.html
View File

@ -13,7 +13,8 @@
Your browser does not support HTML5 Audio! Your browser does not support HTML5 Audio!
</audio> </audio>
<div id="currentTime">00:00</div> <div id="currentTime"></div>
<div id="duration"></div>
<div id="controls"> <div id="controls">
<a id="prev">⏮</a> <a id="prev">⏮</a>

24
playlist.js
View File

@ -57,12 +57,18 @@ function mmss(s) {
return mm + ":" + ss; return mm + ":" + ss;
} }
function durationchange(e) {
let duration = e.srcElement.duration;
document.querySelector("#duration").textContent = mmss(duration);
}
function timeupdate(e) { function timeupdate(e) {
let currentTime = e.srcElement.currentTime; let currentTime = e.srcElement.currentTime;
let duration = e.srcElement.duration;
let tgt = document.querySelector("#currentTime"); let tgt = document.querySelector("#currentTime");
document.querySelector("#currentTime").textContent = mmss(currentTime); tgt.textContent = mmss(currentTime);
if (duration - currentTime < 20) { if (duration - currentTime < 20) {
tgt.classList.add("fin"); tgt.classList.add("fin");
} else { } else {
@ -97,7 +103,7 @@ function midiMessage(e) {
let data = e.data; let data = e.data;
let ctrl = data[1]; let ctrl = data[1];
let val = data[2]; let val = data[2];
if (data[0] == 176) { if ((data[0] == 0xb0) || (data[0] == 0xbf)) {
switch (ctrl) { switch (ctrl) {
case 0: // master volume slider case 0: // master volume slider
audio.volume = val / 127; audio.volume = val / 127;
@ -130,6 +136,15 @@ function handleMidiAccess(access) {
for (let input of access.inputs.values()) { for (let input of access.inputs.values()) {
input.addEventListener("midimessage", midiMessage); input.addEventListener("midimessage", midiMessage);
} }
for (let output of access.outputs.values()) {
if (output.name == "nanoKONTROL2 MIDI 1") {
controller = output;
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, 0x2a, 0x7f]); // Stop
output.send([0xbf, 0x29, 0x7f]); // Play
}
}
} }
function run() { function run() {
@ -143,6 +158,7 @@ function run() {
document.querySelector("#next").addEventListener("click", next); document.querySelector("#next").addEventListener("click", next);
audio.addEventListener("ended", ended); audio.addEventListener("ended", ended);
audio.addEventListener("timeupdate", timeupdate); audio.addEventListener("timeupdate", timeupdate);
audio.addEventListener("durationchange", durationchange);
for (let li of document.querySelectorAll("#playlist li")) { for (let li of document.querySelectorAll("#playlist li")) {
li.addEventListener("click", loadTrack); li.addEventListener("click", loadTrack);
} }
@ -156,7 +172,7 @@ function run() {
document.querySelector("#playlist li").classList.add("current"); document.querySelector("#playlist li").classList.add("current");
prev(); prev();
navigator.requestMIDIAccess().then(handleMidiAccess); navigator.requestMIDIAccess({sysex: true}).then(handleMidiAccess);
} }
window.addEventListener("load", run); window.addEventListener("load", run);