From e054918e3b9ae945719f36da70b0fb595e7e3879 Mon Sep 17 00:00:00 2001
From: DV <divyanshsingh372@gmail.com>
Date: Fri, 4 Feb 2022 04:05:21 +0530
Subject: [PATCH] Audio controls

I've added audio controls through which we can pause/play and forward/rewind the audio.
---
 .vscode/settings.json |  3 +++
 index.html            | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6b665aaa0
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
index e7006fff0..e9c94ffee 100644
--- a/index.html
+++ b/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;