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)