update v1.4 18/04/2025

added audioplayer list play

Author: thrive4

templates/footer.html

@@ -54,6 +54,9 @@
        filterelement = "genre";
     }
     if (window.localStorage.getItem('tdelement') === '5') {
+       filterelement = "theme";
+    }
+    if (window.localStorage.getItem('tdelement') === '6') {
        filterelement = "year";
     }
     if (window.localStorage.getItem('tdelement') === null) {
@@ -67,8 +70,62 @@
     }
     document.getElementById("searchbox").innerHTML = text;
     document.getElementById("srinput").focus();
-    //window.alert(text);
 
+    // audio player routines todo needs optimization and further tweaks
+    const trElements = document.querySelectorAll('tr.trlight');
+    const audio      = document.getElementById('audio');
+    let currentIndex = 0;
+    let urls         = [];
+    let titles       = [];
+    let shuffle      = false;
+    audio.volume     = 0.5;
+
+    trElements.forEach(trElement => {
+        const onclickAttribute = trElement.getAttribute('onclick');
+        const urlMatch = onclickAttribute.match(/audioplay\('([^']+)'/);
+        if (urlMatch && urlMatch[1]) {
+            urls.push(urlMatch[1]);
+            const titleElement = trElement.querySelector('td:nth-child(3)');
+            titles.push(titleElement ? titleElement.textContent : 'Unknown Title');
+        }
+    });
+
+    let previousPicks = [];
+
+    function shuffleplay(set) {
+        if (previousPicks.length === set) {
+            // reset picks
+            previousPicks = [];
+        }
+
+        let shuffleindex;
+        do {
+            shuffleindex = Math.floor(Math.random() * set);
+        } while (previousPicks.includes(shuffleindex));
+        // ensure the pick is not a previous pick
+
+        previousPicks.push(shuffleindex);
+        console.log('pick: ', shuffleindex);
+        return shuffleindex;
+    }
+
+// Accessing previous picks
+//let mostRecentPick = previousPicks[currentIndex - 1]; // 5
+//let secondMostRecentPick = previousPicks[currentIndex - 2]; // 1
+//let thirdMostRecentPick = previousPicks[currentIndex - 3]; // 7
+
+
+    audio.addEventListener('ended', () => {
+        //console.log('Playback ended!');
+        if (currentIndex == trElements.length) {
+           currentIndex = 0;
+        }
+        // shuffle play
+        if (shuffle) {
+           currentIndex = shuffleplay(trElements.length);
+        }
+        audioplay(urls[currentIndex], trElements[currentIndex]);
+    });
 </script>
 </body>
 </html>

templates/lib.js

@@ -93,11 +93,60 @@ function showDivs(n) {
 
 document.onkeydown = function (event) {
     var kbpressed = event.key;
+    // tricky overrides browser shortcut keys
+    //event.preventDefault();
+    // todo harmonize with audio end
+    if (currentIndex == trElements.length) {
+       currentIndex = 0;
+    }
+    // audio previous
     if(kbpressed == "ArrowLeft") {
         plusDivs(-1);
+        // shuffle play
+        //if (shuffle) {
+        //   currentIndex = previousPicks[currentIndex - 1];
+        //   audioplay(urls[currentIndex], trElements[currentIndex]);
+        //} else {
+            if (currentIndex >  1) {
+               audioplay(urls[currentIndex - 2], trElements[currentIndex - 2]);
+            }
+        //}
     }
+    // audio next
     if(kbpressed == "ArrowRight") {
         plusDivs(1);
+        // shuffle play
+        if (shuffle) {
+           currentIndex = shuffleplay(trElements.length);
+        }
+        audioplay(urls[currentIndex], trElements[currentIndex]);
+    }
+    // audio pause / play
+    if(kbpressed == "p") {
+        if (document.getElementById("audio").paused) {
+           document.getElementById("audio").play();
+        } else {
+           document.getElementById("audio").pause();
+        }
+    }
+    // audio seek
+    if(kbpressed == ".") {
+        document.getElementById("audio").currentTime = document.getElementById("audio").currentTime + 5;
+    }
+    if(kbpressed == ",") {
+        document.getElementById("audio").currentTime = document.getElementById("audio").currentTime - 5;
+    }
+    // audio volume
+    if(kbpressed == "+") {
+      console.log(document.getElementById("audio").volume );
+        if (document.getElementById("audio").volume < 0.9) {
+           document.getElementById("audio").volume = document.getElementById("audio").volume + 0.1;
+        }
+    }
+    if(kbpressed == "-") {
+        if (document.getElementById("audio").volume >= 0.1) {
+           document.getElementById("audio").volume = document.getElementById("audio").volume - 0.1;
+        }
     }
     if(kbpressed == "Escape") {
         if (modal.style == undefined) {
@@ -109,21 +158,22 @@ document.onkeydown = function (event) {
 
 // play audio source
 function audioplay(music, element) {
+    currentIndex = element.closest('tr').rowIndex -1;
+    //console.log(currentIndex);
+    console.log('Playing:', titles[element.closest('tr').rowIndex - 1]);
     document.getElementById("audio").pause();
     document.getElementById("audio").setAttribute('src', music);
     document.getElementById("audio").setAttribute('type', 'audio/mpeg');
     document.getElementById("audio").load();
     document.getElementById("audio").play();
-    document.getElementById("audio").volume = 0.5;
+    //document.getElementById("audio").volume = 0.5;
     document.getElementById("audio").style.visibility = "visible";
     // set or remove play button
     var data = document.getElementsByClassName("audiobutton");
-    // reset selected up and down
     for (i = 0; i < data.length; i++) {
            data[i].style.visibility = "hidden";
     }
     for (i = 0; i < data.length; i++) {
-        // toggle on row id
         if (i == element.closest('tr').rowIndex - 1) {
            data[i].style.visibility = "visible";
         }
@@ -132,6 +182,8 @@ function audioplay(music, element) {
     for (i = 0; i < data.length; i++) {
         data[i].style.visibility = "visible";
     }
+
+    currentIndex++;
 }
 
 // play youtube audio source