add podcasts and rework audio player

TheRedstoneDEV-DE · robert · commit 556a0d4ee295 · 2025-03-16T16:02:31.000+01:00
diff --git a/js/player.js b/js/player.js
@@ -0,0 +1,42 @@
+const audio_player = document.getElementsByClassName("audio-js");
+const button = document.getElementsByClassName("control-js");
+const progress = document.getElementsByClassName("progress-js");
+const time = document.getElementsByClassName("time-js");
+const time_left = document.getElementsByClassName("time-left-js");
+var state = false;
+function play_pause(i){
+    if (state){
+        audio_player[i].pause();
+        button[i].innerHTML="";
+    }else{
+        audio_player[i].play();
+        button[i].innerHTML="";
+        time_left[i].innerHTML=audio_player[i].duration.toHHMMSS();
+    }
+    state = !state;
+}
+
+
+Number.prototype.toHHMMSS = function () {
+    var sec_num = parseInt(this, 10); // don't forget the second param
+    var hours   = Math.floor(sec_num / 3600);
+    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
+    var seconds = sec_num - (hours * 3600) - (minutes * 60);
+
+    if (hours   < 10) {hours   = "0"+hours;}
+    if (minutes < 10) {minutes = "0"+minutes;}
+    if (seconds < 10) {seconds = "0"+seconds;}
+    return hours+':'+minutes+':'+seconds;
+}
+
+for (let i=0; i<document.getElementsByClassName("audio-js").length; i++){
+    audio_player[i].addEventListener("timeupdate", () => {
+        const percent = (audio_player[i].currentTime / audio_player[i].duration) * 100;
+        progress[i].value = percent;
+        time[i].innerHTML=audio_player[i].currentTime.toHHMMSS();
+    });
+    progress[i].addEventListener("change", () => {
+        const time = (progress[i].value / 100)*audio_player[i].duration;
+        audio_player[i].currentTime = time;
+    });
+}
diff --git a/podcasts.html b/podcasts.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="css/style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div class="center head">
+        <h1>TheRedstoneDEV_DE</h1>
+        <h5>##### References #####</h5>
+        <a class="icon" href="https://team.devellight.space:8096/TheRedstoneDEV_DE"><span class="icon"></span></a>
+        <a class="icon" href="https://github.com/theredstonedev-de"><span class="icon"></span></a>
+        <a class="icon" href="https://www.youtube.com/@theredstonedev_de5808"><span class="icon"></span></a>
+        <a class="icon" href="https://devellight.space/@theredstonedev_de"><span class="icon">󰫑</span></a>
+    </div>
+    <div class="podcasts section">
+        <a href="index.html" class="lnk">[<- Home]</a>
+        <h2>## Podcasts</h2>
+        <!---- <div class="audioplayer">
+            <a onclick="play_pause(0)" class="control-js"></a> Soundtrack07.mp3 <br class="mobile">
+                <span class="time-js">00:00:00</span> <br class="mobile"> <input class="progress-js" type="range" max="100" value="0"><br class="mobile"><span class="time-left-js">00:00:00</span>
+            <audio controls style="display: none;" class="audio-js">
+                <source src="res/Projekt.mp3" type="audio/mp3">
+            </audio>
+            <script src="js/player.js"></script>
+        </div> -->
+        <div class="text">There are currently no podcasts availlable... Sorry :(</div>
+    </div>
+    <div class="links section">
+        <h2>## Local References</h2>
+        <ul>
+          <li><a class="lnk inactive" href="">[Blog (to be added)]</a>
+          <li><a class="lnk" href="hardware.html">[Hardware]</a>
+          <li><a class="lnk" href="https://github.com/TheRedstoneDEV-DE/dotfiles">[Dotfiles]</a>
+          <li><a class="lnk" href="credits.html">[Credits]</a></li>
+          <li><a class="lnk" href="art-lib.html">[Art libraray]</a>
+          <li><a class="lnk inactive" href="podcasts.html">[Podcasts]</a>
+          <li><a class="lnk" href=impressum.html>[Impressum]</a>
+        </ul>
+      </div>
+      <div class="footer center">Robert Richter. All rights reserved. &copy 2024</div>
+</body>
+</html>
