49 lines
No EOL
1.6 KiB
JavaScript
49 lines
No EOL
1.6 KiB
JavaScript
const audios = document.querySelectorAll("audio")
|
|
const articles = document.querySelectorAll("article")
|
|
const signs = document.querySelectorAll(".sing")
|
|
outindex = 0
|
|
playing = false
|
|
playcolor = "#00ff3c"
|
|
function abspielen(){
|
|
if(playing){
|
|
audios[outindex].pause()
|
|
signs[outindex].innerHTML = ""
|
|
playing = false
|
|
articles[outindex].style.margin = "0px"
|
|
articles[outindex].style.boxShadow = "0 0 0px 0px "+playcolor
|
|
document.querySelector("button").innerHTML = "Abspielen"
|
|
}
|
|
else{
|
|
audios[outindex].play()
|
|
playing = true
|
|
signs[outindex].innerHTML = "Spielt"
|
|
articles[outindex].style.margin = "8px"
|
|
articles[outindex].style.boxShadow = "0 0 6px 3px "+playcolor
|
|
document.querySelector("button").innerHTML = "Pausieren"
|
|
}
|
|
}
|
|
for (const [index,audio] of audios.entries()){
|
|
audio.addEventListener("ended", (event) => {
|
|
signs[index].innerHTML = ""
|
|
if (index != audios.length -1){
|
|
outindex = index +1
|
|
audios[outindex].play()
|
|
// Visueles
|
|
signs[index].innerHTML = ""
|
|
articles[index].style.filter = "grayscale("+(index+1)*50+"%)"
|
|
articles[index].style.boxShadow = "0 0 0px 0px "+playcolor
|
|
articles[outindex].style.margin = "8px"
|
|
signs[outindex].innerHTML = "Spielt"
|
|
articles[outindex].style.boxShadow = "0 0 6px 1px "+playcolor
|
|
}
|
|
else{
|
|
signs[index].innerHTML = ""
|
|
articles[index].style.filter = "grayscale(80%)"
|
|
articles[index].style.boxShadow = "0 0 0px 0px "+playcolor
|
|
articles[index].style.margin = "8px"
|
|
signs[index].innerHTML = "Spielt"
|
|
articles[index].style.boxShadow = "0 0 6px 1px "+playcolor
|
|
}
|
|
})
|
|
}
|
|
console.log(audios) |