//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)