diff --git a/src/components/AudioPlayer.tsx b/src/components/AudioPlayer.tsx index 5e4d94e..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 { @@ -34,19 +35,42 @@ const AudioPlayer: React.FC = ({ 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 = ({ audioURL, name }) => {

{name}

- - + + +