webmusic.js: replace spaces with tabs
This commit is contained in:
parent
e19f06a9d0
commit
81b67db9a1
234
webmusic.js
234
webmusic.js
|
|
@ -6,174 +6,174 @@ let total = 0;
|
||||||
let index = 0;
|
let index = 0;
|
||||||
|
|
||||||
let sound = new Howl({
|
let sound = new Howl({
|
||||||
src: [''],
|
src: [''],
|
||||||
format: "mp3",
|
format: "mp3",
|
||||||
html5: true
|
html5: true
|
||||||
});
|
});
|
||||||
|
|
||||||
setInterval(function () {
|
setInterval(function () {
|
||||||
updateState();
|
updateState();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
initState();
|
initState();
|
||||||
updateState()
|
updateState()
|
||||||
};
|
};
|
||||||
|
|
||||||
window.onkeyup = function (event) {
|
window.onkeyup = function (event) {
|
||||||
switch (event.key) {
|
switch (event.key) {
|
||||||
case " ":
|
case " ":
|
||||||
case "p":
|
case "p":
|
||||||
if (gstate == "idle" && total !== 0) {
|
if (gstate == "idle" && total !== 0) {
|
||||||
playSong(queue[0])
|
playSong(queue[0])
|
||||||
} else {
|
} else {
|
||||||
togglePlayback();
|
togglePlayback();
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "r":
|
case "r":
|
||||||
toggleRepeat();
|
toggleRepeat();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "c":
|
case "c":
|
||||||
toggleContinue();
|
toggleContinue();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "ArrowUp":
|
case "ArrowUp":
|
||||||
previousTrack();
|
previousTrack();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "ArrowDown":
|
case "ArrowDown":
|
||||||
nextTrack();
|
nextTrack();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "ArrowLeft":
|
case "ArrowLeft":
|
||||||
if (sound.seek() < 10) {
|
if (sound.seek() < 10) {
|
||||||
sound.seek(0);
|
sound.seek(0);
|
||||||
} else {
|
} else {
|
||||||
sound.seek(sound.seek()-10);
|
sound.seek(sound.seek()-10);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "ArrowRight":
|
case "ArrowRight":
|
||||||
sound.seek(sound.seek()+10);
|
sound.seek(sound.seek()+10);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "Escape":
|
case "Escape":
|
||||||
document.getElementById("back").click();
|
document.getElementById("back").click();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
function togglePlayback() {
|
function togglePlayback() {
|
||||||
if (sound.playing())
|
if (sound.playing())
|
||||||
sound.pause();
|
sound.pause();
|
||||||
else
|
else
|
||||||
sound.play();
|
sound.play();
|
||||||
}
|
}
|
||||||
|
|
||||||
function setState(state) {
|
function setState(state) {
|
||||||
gstate = state;
|
gstate = state;
|
||||||
console.log("now in state: " + state);
|
console.log("now in state: " + state);
|
||||||
updateState();
|
updateState();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function playSong(url) {
|
function playSong(url) {
|
||||||
if (document.getElementsByClassName("playing").length > 0)
|
if (document.getElementsByClassName("playing").length > 0)
|
||||||
document.getElementsByClassName("playing")[0].classList.remove("playing");
|
document.getElementsByClassName("playing")[0].classList.remove("playing");
|
||||||
index = queue.indexOf(url);
|
index = queue.indexOf(url);
|
||||||
sound.stop();
|
sound.stop();
|
||||||
sound.unload();
|
sound.unload();
|
||||||
sound = null;
|
sound = null;
|
||||||
delete sound;
|
delete sound;
|
||||||
|
|
||||||
sound = new Howl({
|
sound = new Howl({
|
||||||
src: [url],
|
src: [url],
|
||||||
html5: true
|
html5: true
|
||||||
});
|
});
|
||||||
|
|
||||||
setState("loading");
|
setState("loading");
|
||||||
sound.play();
|
sound.play();
|
||||||
sound.loop(repeat);
|
sound.loop(repeat);
|
||||||
|
|
||||||
document.querySelectorAll('[onclick="playSong(\''+url+'\')"]')[0].classList.add("playing");
|
document.querySelectorAll('[onclick="playSong(\''+url+'\')"]')[0].classList.add("playing");
|
||||||
|
|
||||||
sound.on("play", function () {
|
sound.on("play", function () {
|
||||||
setState("playing");
|
setState("playing");
|
||||||
});
|
});
|
||||||
sound.on("loaderror", function () {
|
sound.on("loaderror", function () {
|
||||||
setState("error loading track")
|
setState("error loading track")
|
||||||
});
|
});
|
||||||
sound.on("playerror", function () {
|
sound.on("playerror", function () {
|
||||||
setState("error opening audio device")
|
setState("error opening audio device")
|
||||||
});
|
});
|
||||||
sound.on("end", function () {
|
sound.on("end", function () {
|
||||||
setState("idle");
|
setState("idle");
|
||||||
nextTrack()
|
nextTrack()
|
||||||
});
|
});
|
||||||
sound.on("pause", function () {
|
sound.on("pause", function () {
|
||||||
setState("paused")
|
setState("paused")
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleRepeat() {
|
function toggleRepeat() {
|
||||||
repeat = !repeat;
|
repeat = !repeat;
|
||||||
continuelist = !repeat;
|
continuelist = !repeat;
|
||||||
sound.loop(repeat);
|
sound.loop(repeat);
|
||||||
updateState();
|
updateState();
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleContinue() {
|
function toggleContinue() {
|
||||||
continuelist = !continuelist;
|
continuelist = !continuelist;
|
||||||
updateState();
|
updateState();
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateState() {
|
function updateState() {
|
||||||
document.getElementById("state").setAttribute('onclick', 'togglePlayback()');
|
document.getElementById("state").setAttribute('onclick', 'togglePlayback()');
|
||||||
let statestr = "[";
|
let statestr = "[";
|
||||||
statestr += gstate;
|
statestr += gstate;
|
||||||
if (sound.playing())
|
if (sound.playing())
|
||||||
statestr += " " + formatTime(Math.round(sound.seek())) + "/" + formatTime(Math.round(sound.duration()));
|
statestr += " " + formatTime(Math.round(sound.seek())) + "/" + formatTime(Math.round(sound.duration()));
|
||||||
|
|
||||||
statestr += "]";
|
statestr += "]";
|
||||||
document.getElementById("state").innerHTML = statestr;
|
document.getElementById("state").innerHTML = statestr;
|
||||||
let flags = "[";
|
let flags = "[";
|
||||||
if (repeat)
|
if (repeat)
|
||||||
flags += '<a onclick="toggleRepeat()" href="#" style="color:#6b9969">R</a>';
|
flags += '<a onclick="toggleRepeat()" href="#" style="color:#6b9969">R</a>';
|
||||||
else
|
else
|
||||||
flags += '<a onclick="toggleRepeat()" href="#">R</a>';
|
flags += '<a onclick="toggleRepeat()" href="#">R</a>';
|
||||||
if (continuelist)
|
if (continuelist)
|
||||||
flags += '<a onclick="toggleContinue()" href="#" style="color:#6b9969">C</a>';
|
flags += '<a onclick="toggleContinue()" href="#" style="color:#6b9969">C</a>';
|
||||||
else
|
else
|
||||||
flags += '<a onclick="toggleContinue()" href="#">C</a>';
|
flags += '<a onclick="toggleContinue()" href="#">C</a>';
|
||||||
|
|
||||||
document.getElementById("flags").innerHTML = flags + "]";
|
document.getElementById("flags").innerHTML = flags + "]";
|
||||||
}
|
}
|
||||||
|
|
||||||
function initState() {
|
function initState() {
|
||||||
total = queue.length;
|
total = queue.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
function previousTrack() {
|
function previousTrack() {
|
||||||
if (index-- === 0)
|
if (index-- === 0)
|
||||||
index = total-1;
|
index = total-1;
|
||||||
if (continuelist) {
|
if (continuelist) {
|
||||||
playSong(queue[index])
|
playSong(queue[index])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function nextTrack() {
|
function nextTrack() {
|
||||||
if (++index === total)
|
if (++index === total)
|
||||||
index = 0;
|
index = 0;
|
||||||
if (continuelist) {
|
if (continuelist) {
|
||||||
playSong(queue[index])
|
playSong(queue[index])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatTime(secs) {
|
function formatTime(secs) {
|
||||||
const minutes = Math.floor(secs / 60) || 0;
|
const minutes = Math.floor(secs / 60) || 0;
|
||||||
const seconds = (secs - minutes * 60) || 0;
|
const seconds = (secs - minutes * 60) || 0;
|
||||||
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
|
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue