Merge pull request #63 from hack4impact-calpoly/CreateAudioControlsCo…

…mponent

Add to audio player component issue completed

src/components/AudioPlayer.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React, { useState, useEffect, useRef } from "react";
+
 import { Howl } from "howler";
 
 interface AudioPlayerProps {
@@ -34,19 +35,42 @@ 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) {
+      if (isPlaying) {
+        soundRef.current.pause();
+        setIsPlaying(false);
+      } else {
+        soundRef.current.play();
+        setIsPlaying(true);
+      }
+    }
+  };
+
+  // Skip forward by 5 seconds
+  const skipForward = () => {
     if (soundRef.current) {
-      soundRef.current.play();
-      setIsPlaying(true);
+      const currentTime = soundRef.current.seek() as number;
+      const duration = soundRef.current.duration();
+      const newTime = Math.min(currentTime + 5, duration);
+      soundRef.current.seek(newTime);
+      if (duration > 0) {
+        setProgress((newTime / duration) * 100);
+      }
     }
   };
 
-  // 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;
+      const newTime = Math.max(currentTime - 5, 0);
+      soundRef.current.seek(newTime);
+      const duration = soundRef.current.duration();
+      if (duration > 0) {
+        setProgress((newTime / duration) * 100);
+      }
     }
   };
 
@@ -70,12 +94,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%" }} />