Audio controls

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

index.html

@@ -14,6 +14,27 @@
   <link rel="manifest" href="manifest.json" />
   <title>ytify</title>
   <link rel="stylesheet" href="style.css">
+
+    <script type="text/javascript">
+      /*Function for Play & Pause Buttons*/
+      function play() {
+        var audioPlayer = document.getElementById("audioPlayer");
+        var btnPlay = document.getElementById("btnPlay");
+        if (audioPlayer.paused) {
+          audioPlayer.play();
+          btnPlay.textContent = "||";
+        } else {
+          audioPlayer.pause();
+          btnPlay.textContent = ">";
+        }
+      }
+      /*Function to Forward & Rewind*/
+      function forwardRewind(param) {
+        var audioPlayer = document.getElementById("audioPlayer");
+        audioPlayer.currentTime += param;
+      }
+    </script>
+
   <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
 </head>
 
@@ -27,8 +48,20 @@
       <span class="label label-primary ">0</span>
       <button class="btn disabled">>></button>
     </ul>
-    <audio controls></audio>
+    <audio id="audioPlayer" controls></audio>
     <br>
+    <div class="Buttons" id="playerButtons">
+      <button id="btnRewind" onclick="forwardRewind(-5)">
+        <<</i>
+      </button>
+      <button id="btnPlay" onclick="play()">
+        ></i>
+      </button>
+      <button id="btnForward" onclick="forwardRewind(5)">
+        >></i>
+      </button>
+      <br>
+
     <label>
       <span>Scanning Interval : <b>2</b>s</span>&nbsp;
       <button class="btn">+</button>&nbsp;