73 lines
No EOL
2.1 KiB
JavaScript
73 lines
No EOL
2.1 KiB
JavaScript
//Ich möchte dafur sorgen das wenn der knopf auf der karte gedrückt wird diese gespielt wird
|
|
const audios = document.querySelectorAll("audio")
|
|
const articles = document.querySelectorAll("article")
|
|
const signs = document.querySelectorAll(".sing")
|
|
outindex = 0
|
|
playing = false
|
|
playcolor = "#00ff3c"
|
|
loop = true
|
|
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){
|
|
audios[id].pause()
|
|
playing = false
|
|
articles[id].style.margin = "0px"
|
|
articles[id].style.boxShadow = "0 0 0px 0px "+playcolor
|
|
}
|
|
else{
|
|
audios[id].play()
|
|
playing = true
|
|
articles[id].style.margin = "8px"
|
|
articles[id].style.boxShadow = "0 0 6px 3px "+playcolor
|
|
}
|
|
}
|
|
function abspielen(){
|
|
if(playing){
|
|
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{
|
|
audios[outindex].play()
|
|
playing = true
|
|
articles[outindex].style.margin = "8px"
|
|
articles[outindex].style.boxShadow = "0 0 6px 3px "+playcolor
|
|
document.querySelector("#play").innerHTML = "Pausieren"
|
|
}
|
|
}
|
|
for (const [index,audio] of audios.entries()){
|
|
audio.addEventListener("ended", (event) => {
|
|
if (index != audios.length -1){
|
|
outindex = index +1
|
|
audios[outindex].play()
|
|
// Visueles
|
|
articles[index].style.filter = "grayscale("+(index+1)*50+"%)"
|
|
articles[index].style.boxShadow = "0 0 0px 0px "+playcolor
|
|
articles[outindex].style.filter = "grayscale(0%)"
|
|
articles[outindex].style.margin = "8px"
|
|
articles[outindex].style.boxShadow = "0 0 6px 1px "+playcolor
|
|
}
|
|
else{
|
|
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()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
console.log(audios) |