94 lines
No EOL
2.1 KiB
JavaScript
94 lines
No EOL
2.1 KiB
JavaScript
const audios = document.querySelectorAll("audio")
|
|
const articles = document.querySelectorAll("article")
|
|
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)*50+"%)"
|
|
articles[id-1].style.boxShadow = "0 0 0px 0px "+playcolor
|
|
}
|
|
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()
|
|
}
|
|
|
|
function vorherige(id){
|
|
audios[id].pause()
|
|
audios[id-1].play()
|
|
}
|
|
|
|
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)
|
|
}
|
|
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()
|
|
}
|
|
}
|
|
})
|
|
} |