Abspiel-knopf auf allen Karten

static/script.js

@@ -1,3 +1,4 @@
+//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")
@@ -16,10 +17,23 @@ function looptrue(){
     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()
-    signs[outindex].innerHTML = ""
     playing = false
     articles[outindex].style.margin = "0px"
     articles[outindex].style.boxShadow = "0 0 0px 0px "+playcolor
@@ -28,7 +42,6 @@ function 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("#play").innerHTML = "Pausieren"
@@ -36,25 +49,20 @@ function abspielen(){
 }
 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.filter = "grayscale(0%)"
     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
     if(loop){
       audios[0].play()

templates/karte.html

@@ -1,7 +1,7 @@
 <article>
-    <p id="{{karte_loop.index0}}" class="sing"></p>
     <img src="{{ karte.img }}"/>
     {% if karte.ytid %}
+    <button id="{{karte_loop.index0}}" onclick="abspielendiese(this.id)">Abspielen</button>
     <audio controls src="/static/{{karte.datei}}"></audio>
     {% endif %}
     <h2>{{ karte.titel}}</h2>