Alternative version by lijnenspel.

severak · Dec 11, 2024 · 8763968 · 8763968
1 parent 8bdd289
commit 8763968
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 0 deletions.
diff --git a/alternative.html b/alternative.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>alternative html5 playlist</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {
+      font-family: "Lucida Console", monospace;
+      background-color: plum;
+    }
+
+    .container {
+      width: 30em;
+      margin: auto;
+      padding: 1em;
+      background-color: #FFCC66;
+    }
+
+    audio {
+      width: 98%;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>alternative approach</h1>
+    <p>Just include one magical javascript, some audio tags and everything works as expected:</p>
+    <p>Anke</p>
+    <audio controls src="02-anke.mp3" preload="auto"></audio>
+    <p>Metalik</p>
+    <audio controls src="09-metalik.mp3" preload="metadata"></audio>
+    <p>Regenschori</p>
+    <audio controls src="14-regenschori.mp3" preload="metadata"></audio>
+    <p>(alternative version of <a href="https://github.com/severak/html5-playlist">severak/html5-playlist</a>)</p>
+    <p>(<a href="index.html">original version</a>)</p>
+  </div>
+  <script src="auto-playlist.js"></script>
+</body>
+</html>
diff --git a/auto-playlist.js b/auto-playlist.js
@@ -0,0 +1,25 @@
+// Automatic playlist for HTML5 audio tags.
+//
+// Based on code by lijnenspel posted on lines forum (https://llllllll.co/t/izzzzi-net-username-sharing/69588/239)
+
+pauseOthers = (e) => {
+    document.querySelectorAll("audio").forEach((a) => {
+        if (e.target != a) {
+            a.pause()
+        }
+    })
+}
+
+playNext = (e) => {
+    let allaudio = Array.from(document.querySelectorAll("audio"));
+    let nextid = allaudio.indexOf(e.target) + 1
+    if(allaudio[nextid]){
+        allaudio[nextid].play()
+    }
+}
+
+document.querySelectorAll("audio")
+    .forEach((a) => {
+        a.addEventListener("play", pauseOthers)
+        a.addEventListener("ended", playNext)
+    })
diff --git a/index.html b/index.html
@@ -63,6 +63,7 @@ <h1>html5 playlist demo</h1>
 <!-- Note: songs are shuffled as Chrome would not play different audio elements with same src. -->
 
 <p>(demo of <a href="https://github.com/severak/html5-playlist">severak/html5-playlist</a>)</p>
+    <p>(also try <a href="alternative.html">alternative approach</a>)</p>
 
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -63,6 +63,7 @@ <h1>html5 playlist demo</h1> @@
     <!-- Note: songs are shuffled as Chrome would not play different audio elements with same src. -->
     <p>(demo of <a href="https://github.com/severak/html5-playlist">severak/html5-playlist</a>)</p>
+        <p>(also try <a href="alternative.html">alternative approach</a>)</p>
     </div>
@@ Expand Down @@