Loopfunktion

static/script.js

@@ -4,6 +4,18 @@ 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 abspielen(){
   if(playing){
     audios[outindex].pause()
@@ -11,7 +23,7 @@ function abspielen(){
     playing = false
     articles[outindex].style.margin = "0px"
     articles[outindex].style.boxShadow = "0 0 0px 0px "+playcolor
-    document.querySelector("button").innerHTML = "Abspielen"
+    document.querySelector("#play").innerHTML = "Abspielen"
   }
   else{
     audios[outindex].play()
@@ -19,7 +31,7 @@ function abspielen(){
     signs[outindex].innerHTML = "Spielt"
     articles[outindex].style.margin = "8px"
     articles[outindex].style.boxShadow = "0 0 6px 3px "+playcolor
-    document.querySelector("button").innerHTML = "Pausieren"
+    document.querySelector("#play").innerHTML = "Pausieren"
   }
 }
 for (const [index,audio] of audios.entries()){
@@ -32,6 +44,7 @@ for (const [index,audio] of audios.entries()){
     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
@@ -43,6 +56,9 @@ for (const [index,audio] of audios.entries()){
     articles[index].style.margin = "8px"
     signs[index].innerHTML = "Spielt"
     articles[index].style.boxShadow = "0 0 6px 1px "+playcolor
+    if(loop){
+      audios[0].play()
+    }
   }
   })
 }

templates/index.html

@@ -55,7 +55,7 @@
 <h2>2026</h2>
 <a href="/suche?liste={{liste}}">Du willst ein weiteres Lied in der Playlist?</a>
 <p>Die Playlist {{liste}} ist insgesamt {{ gesamtLaenge | zeit }} lang und enthält {{ karten|length }} Lieder</p>
-<button onclick="abspielen()">Abspielen</button>
+<p><button id="play" onclick="abspielen()">Abspielen</button><button id="loop" onclick="looptrue()">Loop</button></p>
 <div id = "flex-container">
     {% for karte in karten %}
     {% set karte_loop = loop %}

templates/karte.html

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