Implement audio speed control

Related to #108 Add speed control functionality to the audiobook player. * Add speed control buttons (0.5x, 1x, 1.5x, 2x) near the audio player in `adventures.html`, `fs.html`, and `rdpd.html`. * Update `app.js` to add event listeners for speed control buttons and implement functionality to change audio playback rate based on user selection. * Update `script.js` to add event listeners for speed control buttons and implement functionality to change audio playback rate based on user selection. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/Ctoic/Lisbook/issues/108?shareId=XXXX-XXXX-XXXX-XXXX).
Ctoic · Oct 19, 2024 · f58fcb9 · f58fcb9
1 parent f895cbe
commit f58fcb9
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 0 deletions.
diff --git a/adventures.html b/adventures.html
@@ -487,6 +487,19 @@ <h3 class="text-lg mt-2">
                                 >
                                     <i class="bi bi-volume-up-fill"></i>
                                 </div>
+                                <!-- Speed Control Buttons -->
+                                <div class="ctrl-button ctrl-button-small" id="speed-0.5x">
+                                    <span>0.5x</span>
+                                </div>
+                                <div class="ctrl-button ctrl-button-small" id="speed-1x">
+                                    <span>1x</span>
+                                </div>
+                                <div class="ctrl-button ctrl-button-small" id="speed-1.5x">
+                                    <span>1.5x</span>
+                                </div>
+                                <div class="ctrl-button ctrl-button-small" id="speed-2x">
+                                    <span>2x</span>
+                                </div>
                             </div>
                         </div>
                     </div>

diff --git a/app.js b/app.js
@@ -77,4 +77,13 @@ document.addEventListener("DOMContentLoaded", function () {
 
   // Event listener for "Previous" button
   if (prevBtn) prevBtn.addEventListener("click", prevPage);
+
+  // Speed control buttons functionality
+  const speedButtons = document.querySelectorAll("[id^='speed-']");
+  speedButtons.forEach((button) => {
+    button.addEventListener("click", function () {
+      const speed = parseFloat(this.id.split("-")[1]);
+      audioPlayer.playbackRate = speed;
+    });
+  });
 });
diff --git a/fs.html b/fs.html
@@ -642,6 +642,19 @@ <h3 class="text-lg mt-2">By Mary Shelby</h3>
                                 >
                                     <i class="bi bi-volume-up-fill"></i>
                                 </div>
+                                <!-- Speed Control Buttons -->
+                                <div class="ctrl-button ctrl-button-small" id="speed-0.5x">
+                                    <span>0.5x</span>
+                                </div>
+                                <div class="ctrl-button ctrl-button-small" id="speed-1x">
+                                    <span>1x</span>
+                                </div>
+                                <div class="ctrl-button ctrl-button-small" id="speed-1.5x">
+                                    <span>1.5x</span>
+                                </div>
+                                <div class="ctrl-button ctrl-button-small" id="speed-2x">
+                                    <span>2x</span>
+                                </div>
                             </div>
                         </div>
                     </div>

diff --git a/rdpd.html b/rdpd.html
@@ -483,6 +483,19 @@ <h3 class="text-lg mt-2">By Yuval Noah Harari</h3>
                                 >
                                     <i class="bi bi-volume-up-fill"></i>
                                 </div>
+                                <!-- Speed Control Buttons -->
+                                <div class="ctrl-button ctrl-button-small" id="speed-0.5x">
+                                    <span>0.5x</span>
+                                </div>
+                                <div class="ctrl-button ctrl-button-small" id="speed-1x">
+                                    <span>1x</span>
+                                </div>
+                                <div class="ctrl-button ctrl-button-small" id="speed-1.5x">
+                                    <span>1.5x</span>
+                                </div>
+                                <div class="ctrl-button ctrl-button-small" id="speed-2x">
+                                    <span>2x</span>
+                                </div>
                             </div>
                         </div>
                     </div>

diff --git a/script.js b/script.js
@@ -427,6 +427,15 @@ document.addEventListener("DOMContentLoaded", function () {
       }
     });
   });
+
+  // Speed control buttons functionality
+  const speedButtons = document.querySelectorAll("[id^='speed-']");
+  speedButtons.forEach((button) => {
+    button.addEventListener("click", function () {
+      const speed = parseFloat(this.id.split("-")[1]);
+      audioPlayer.playbackRate = speed;
+    });
+  });
 });
 // Function to load an HTML file into an element
 function loadHTML(file, elementId) {