From a320414b27d61fd4f0c2c8ce1e7c33aadd0d27a7 Mon Sep 17 00:00:00 2001
From: derrickph33 <derrickph33@gmail.com>
Date: Mon, 3 Mar 2025 19:18:21 -0800
Subject: [PATCH 1/2] audio controls changes

---
 src/components/AudioPlayer.tsx | 39 ++++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/components/AudioPlayer.tsx b/src/components/AudioPlayer.tsx
index 5e4d94e..c3b621e 100644
--- a/src/components/AudioPlayer.tsx
+++ b/src/components/AudioPlayer.tsx
@@ -34,19 +34,33 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioURL, name }) => {
     };
   }, [audioURL]);
 
-  // To handle playing the audio
-  const handlePlay = () => {
+  // Toggle play and pause functionality
+  const togglePlayPause = () => {
     if (soundRef.current) {
-      soundRef.current.play();
-      setIsPlaying(true);
+      if (isPlaying) {
+        soundRef.current.pause();
+        setIsPlaying(false);
+      } else {
+        soundRef.current.play();
+        setIsPlaying(true);
+      }
+    }
+  };
+
+  // Skip forward by 5 seconds
+  const skipForward = () => {
+    if (soundRef.current) {
+      const currentTime = soundRef.current.seek() as number;
+      const duration = soundRef.current.duration();
+      soundRef.current.seek(Math.min(currentTime + 5, duration));
     }
   };
 
-  // To handle pausing the audio.
-  const handlePause = () => {
+  // Skip backward by 5 seconds
+  const skipBackward = () => {
     if (soundRef.current) {
-      soundRef.current.pause();
-      setIsPlaying(false);
+      const currentTime = soundRef.current.seek() as number;
+      soundRef.current.seek(Math.max(currentTime - 5, 0));
     }
   };
 
@@ -70,12 +84,9 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioURL, name }) => {
     <div className="audio-player">
       <h3>{name}</h3>
       <div>
-        <button onClick={handlePlay} disabled={isPlaying}>
-          Play
-        </button>
-        <button onClick={handlePause} disabled={!isPlaying}>
-          Pause
-        </button>
+        <button onClick={skipBackward}>-5 sec</button>
+        <button onClick={togglePlayPause}>{isPlaying ? "Pause" : "Play"}</button>
+        <button onClick={skipForward}>+5 sec</button>
       </div>
       <div>
         <progress value={progress} max="100" style={{ width: "100%" }} />

From 57c5bf76016b150574c2375bc477e96e01e9d1ca Mon Sep 17 00:00:00 2001
From: derrickph33 <derrickph33@gmail.com>
Date: Mon, 3 Mar 2025 19:46:04 -0800
Subject: [PATCH 2/2] add to audioplayer component issue done

---
 src/components/AudioPlayer.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/AudioPlayer.tsx b/src/components/AudioPlayer.tsx
index c3b621e..03c4178 100644
--- a/src/components/AudioPlayer.tsx
+++ b/src/components/AudioPlayer.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useState, useEffect, useRef } from "react";
+
 import { Howl } from "howler";
 
 interface AudioPlayerProps {
@@ -52,7 +53,11 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioURL, name }) => {
     if (soundRef.current) {
       const currentTime = soundRef.current.seek() as number;
       const duration = soundRef.current.duration();
-      soundRef.current.seek(Math.min(currentTime + 5, duration));
+      const newTime = Math.min(currentTime + 5, duration);
+      soundRef.current.seek(newTime);
+      if (duration > 0) {
+        setProgress((newTime / duration) * 100);
+      }
     }
   };
 
@@ -60,7 +65,12 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioURL, name }) => {
   const skipBackward = () => {
     if (soundRef.current) {
       const currentTime = soundRef.current.seek() as number;
-      soundRef.current.seek(Math.max(currentTime - 5, 0));
+      const newTime = Math.max(currentTime - 5, 0);
+      soundRef.current.seek(newTime);
+      const duration = soundRef.current.duration();
+      if (duration > 0) {
+        setProgress((newTime / duration) * 100);
+      }
     }
   };