98 lines
2.5 KiB
JavaScript
98 lines
2.5 KiB
JavaScript
const audios = document.querySelectorAll("audio");
|
|
const articles = document.querySelectorAll("article");
|
|
const kartenContainer = document.getElementById("flex-container");
|
|
outindex = 0;
|
|
playing = false;
|
|
playcolor = "#00ff3c";
|
|
loop = true;
|
|
|
|
function onplay(id) {
|
|
id = parseInt(id);
|
|
if (id > 0) {
|
|
articles[id - 1].style.filter = "grayscale(" + (id + 1) * 20 + "%)";
|
|
articles[id - 1].style.boxShadow = "0 0 0px 0px " + playcolor;
|
|
}
|
|
if (articles[id].offsetWidth * id == window.innerWidth / 2) {
|
|
console.log(articles[id].offsetWidth);
|
|
kartenContainer.scrollWidth += articles[id].offsetWidth;
|
|
}
|
|
articles[id].style.filter = "grayscale(0%)";
|
|
articles[id].style.margin = "8px";
|
|
articles[id].style.boxShadow = "0 0 6px 1px " + playcolor;
|
|
}
|
|
|
|
function nächste(id) {
|
|
audios[id].pause();
|
|
id = parseInt(id) + 1;
|
|
audios[id].play();
|
|
onplay(id);
|
|
}
|
|
|
|
function vorherige(id) {
|
|
audios[id].pause();
|
|
audios[id - 1].play();
|
|
onplay(id - 1);
|
|
}
|
|
|
|
function looptrue() {
|
|
if (loop) {
|
|
loop = false;
|
|
document.querySelector("#loop").innerHTML = "Kein Loop";
|
|
document.querySelector("#loop").style.beckground;
|
|
} else {
|
|
loop = true;
|
|
document.querySelector("#loop").innerHTML = "Loop";
|
|
}
|
|
}
|
|
|
|
function abspielendiese(id) {
|
|
if (playing) {
|
|
//ON PAUSE
|
|
audios[id].pause();
|
|
playing = false;
|
|
articles[id].style.margin = "0px";
|
|
articles[id].style.boxShadow = "0 0 0px 0px " + playcolor;
|
|
} else {
|
|
//ON PLAY
|
|
audios[id].play();
|
|
playing = true;
|
|
onplay(id);
|
|
}
|
|
}
|
|
|
|
function abspielen() {
|
|
if (playing) {
|
|
//ON PAUSE
|
|
audios[outindex].pause();
|
|
playing = false;
|
|
articles[outindex].style.margin = "0px";
|
|
articles[outindex].style.boxShadow = "0 0 0px 0px " + playcolor;
|
|
document.querySelector("#play").innerHTML = "Abspielen";
|
|
} else {
|
|
//ON PLAY
|
|
audios[outindex].play();
|
|
playing = true;
|
|
document.querySelector("#play").innerHTML = "Pausieren";
|
|
onplay(outindex);
|
|
}
|
|
}
|
|
|
|
for (const [index, audio] of audios.entries()) {
|
|
audio.addEventListener("ended", (event) => {
|
|
if (index != audios.length - 1) {
|
|
outindex = index + 1;
|
|
audios[outindex].play();
|
|
onplay(index + 1);
|
|
} else {
|
|
//Last song ON END
|
|
articles[index].style.filter = "grayscale(80%)";
|
|
articles[index].style.boxShadow = "0 0 0px 0px " + playcolor;
|
|
articles[index].style.margin = "8px";
|
|
articles[index].style.boxShadow = "0 0 6px 1px " + playcolor;
|
|
if (loop) {
|
|
audios[0].play();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
//Audio visualising
|