Abspielknopf

static/script.js

@@ -1,11 +1,49 @@
-const audios = document.querySelectorAll("audio") 
-
+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) => { 
-  if (index+1!= audios.length){
-    audios[index + 1].play()
+    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)