Merge pull request #4463 from akash70629/sound

🛠️FIX: volume control  , playback speed of Audio book added

audiobook.html

@@ -13,6 +13,14 @@
     <link
     href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600&display=swap"
     rel="stylesheet">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon_package_v0.16/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon_package_v0.16/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon_package_v0.16/favicon-16x16.png">
+    <link rel="manifest" href="./assets/favicon_package_v0.16/site.webmanifest">
+    <link rel="mask-icon" href="./assets/favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
     <title>Audio Books</title>
     <style>
        .switch-container {
@@ -1067,8 +1075,9 @@ <h3>The Magic Shop</h3>
           <audio
             id="audio1"
             src="audio/The Magic Shop by H. G. Wells Audiobook - FULL [ ezmp3.cc ] (1).mp3"
+            controls
           ></audio>
-          <input
+          <!-- <input
             type="range"
             class="audio-slider"
             id="slider1"
@@ -1085,7 +1094,7 @@ <h3>The Magic Shop</h3>
             onclick="toggleAudio('audio1', 'slider1', 'currentTime1', 'duration1', this)"
           >
             Play
-          </button>
+          </button> -->
         </div>
 
         <div class="spotlight-card">
@@ -1095,8 +1104,9 @@ <h3>The Landlady</h3>
           <audio
             id="audio2"
             src="audio/The Landlady - Roald Dahl [ ezmp3.cc ].mp3"
+            controls
           ></audio>
-          <input
+          <!-- <input
             type="range"
             class="audio-slider"
             id="slider2"
@@ -1113,7 +1123,7 @@ <h3>The Landlady</h3>
             onclick="toggleAudio('audio2', 'slider2', 'currentTime2', 'duration2', this)"
           >
             Play
-          </button>
+          </button> -->
         </div>
 
         <div class="spotlight-card">
@@ -1123,8 +1133,9 @@ <h3>The Lottery Ticket</h3>
           <audio
             id="audio3"
             src="audio/The Lottery Ticket by Anton Chekhov Audiobook [ ezmp3.cc ].mp3"
+            controls
           ></audio>
-          <input
+          <!-- <input
             type="range"
             class="audio-slider"
             id="slider3"
@@ -1141,7 +1152,7 @@ <h3>The Lottery Ticket</h3>
             onclick="toggleAudio('audio3', 'slider3', 'currentTime3', 'duration3', this)"
           >
             Play
-          </button>
+          </button> -->
         </div>
 
         <div class="spotlight-card">
@@ -1151,8 +1162,9 @@ <h3>Bernice Bobs Her Hair</h3>
           <audio
             id="audio4"
             src="audio/Bernice Bobs Her Hair by F. Scott Fitzgerald _ Audiobooks Youtube Free _ Short Stories Youtube [ ezmp3.cc ].mp3"
+            controls
           ></audio>
-          <input
+          <!-- <input
             type="range"
             class="audio-slider"
             id="slider4"
@@ -1169,7 +1181,7 @@ <h3>Bernice Bobs Her Hair</h3>
             onclick="toggleAudio('audio4', 'slider4', 'currentTime4', 'duration4', this)"
           >
             Play
-          </button>
+          </button> -->
         </div>
       </div>
     </section>
@@ -1195,10 +1207,10 @@ <h3>At Twiligt</h3>
        value="0"
        step="1"
        />
-       <div class="time-info">
+       <!-- <div class="time-info">
        <span id="currentTime1">0:00</span> /
        <span id="duration1">0:00</span>
-       </div>
+       </div> -->
        <button
        class="play-pause-btn"
        id="premium"
@@ -1225,10 +1237,10 @@ <h3>The Story Teller</h3>
        value="0"
        step="1"
        />
-       <div class="time-info">
+       <!-- <div class="time-info">
        <span id="currentTime3">0:00</span> /
        <span id="duration3">0:00</span>
-       </div>
+       </div> -->
        <button
        class="play-pause-btn"
        id="premium"
@@ -1255,10 +1267,10 @@ <h3>The Homely Heroine</h3>
       value="0"
        step="1"
        />
-       <div class="time-info">
+       <!-- <div class="time-info">
        <span id="currentTime2">0:00</span> /
        <span id="duration2">0:00</span>
-       </div>
+       </div> -->
        <button
        class="play-pause-btn"
        id="premium"
@@ -1285,10 +1297,10 @@ <h3>Christmas Song</h3>
        value="0"
        step="1"
        />
-       <div class="time-info">
+       <!-- <div class="time-info">
        <span id="currentTime2">0:00</span> /
        <span id="duration2">0:00</span>
-       </div>
+       </div> -->
        <button
        class="play-pause-btn"
        id="premium"