Abspielknopf

app.py

@@ -137,7 +137,7 @@ def suche_finden():
         json.dump(songs,f,indent=2,ensure_ascii=False)
     return redirect("/suche?liste="+liste,303)
 
-@app.route("/rm")
+@app.route("/remove")
 def admin():
     liste = request.args.get("liste")
     if liste is None:
@@ -151,7 +151,7 @@ def admin():
         gesamtLaenge += song["laenge"]
     return render_template('index.html', karten=songs,gesamtLaenge=gesamtLaenge,liste=liste,admin=True)
 
-@app.route("/rm",methods=["POST"])
+@app.route("/remove",methods=["POST"])
 def loeschen():
     liste = request.args.get("liste")
     song = int(request.form.get("index"))

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)

templates/index.html

@@ -44,11 +44,18 @@
         text-align: center;
         color: rgb(181, 181, 181);
     }
+    button{
+        padding: 10px;
+        margin: 5px;
+        border: black;
+        border-radius: 20px;
+    }
 </style>
 <h1>ESC Playlist</h1>
 <h2>2026</h2>
 <a href="/suche?liste={{liste}}">Du willst ein weiteres Lied in der Playlist?</a>
-<p>Die Playlist {{liste}} ist insgesamt lang {{ gesamtLaenge | zeit }} und enthält {{ karten|length }} Lieder</p>
+<p>Die Playlist {{liste}} ist insgesamt {{ gesamtLaenge | zeit }} lang und enthält {{ karten|length }} Lieder</p>
+<button onclick="abspielen()">Abspielen</button>
 <div id = "flex-container">
     {% for karte in karten %}
     {% set karte_loop = loop %}

templates/karte.html

@@ -1,7 +1,8 @@
 <article>
+    <p id="{{karte_loop.index0}}" class="sing"></p>
     <img src="{{ karte.img }}"/>
     {% if karte.ytid %}
-    <audio controls autoplay src="/static/{{karte.datei}}"></audio>
+    <audio src="/static/{{karte.datei}}"></audio>
     {% endif %}
     <h2>{{ karte.titel}}</h2>
         <p><b>Übersetzter Titel:</b>{{ karte.uetitel}}</p>

templates/suche.html

@@ -1,5 +1,5 @@
 <style>
-    form,a{
+    form,a,p{
         display: block;
         text-align: center;
         color: black;