62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import React, { useRef, useState, useEffect } from "react";
|
||
|
||
interface AudioPlayerProps {
|
||
urlAudio: string;
|
||
fileName: string; // ✅ Tambahkan props ini
|
||
}
|
||
|
||
const AudioPlayer: React.FC<AudioPlayerProps> = ({ urlAudio, fileName }) => {
|
||
const audioRef = useRef<HTMLAudioElement>(null);
|
||
const [currentTime, setCurrentTime] = useState(0);
|
||
|
||
const playAudio = () => {
|
||
audioRef.current?.play();
|
||
};
|
||
|
||
const pauseAudio = () => {
|
||
audioRef.current?.pause();
|
||
};
|
||
|
||
const stopAudio = () => {
|
||
if (audioRef.current) {
|
||
audioRef.current.pause();
|
||
audioRef.current.currentTime = 0;
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
const audio = audioRef.current;
|
||
if (!audio) return;
|
||
|
||
const updateTime = () => {
|
||
setCurrentTime(audio.currentTime);
|
||
};
|
||
|
||
audio.addEventListener("timeupdate", updateTime);
|
||
return () => {
|
||
audio.removeEventListener("timeupdate", updateTime);
|
||
};
|
||
}, []);
|
||
|
||
const formatTime = (time: number) => {
|
||
const minutes = Math.floor(time / 60);
|
||
const seconds = Math.floor(time % 60).toString().padStart(2, "0");
|
||
return `${minutes}:${seconds}`;
|
||
};
|
||
|
||
return (
|
||
<div className="mt-2">
|
||
<h2 className="text-lg font-semibold">{fileName}</h2>
|
||
<audio ref={audioRef} src={urlAudio} controls className="mt-1 w-full" />
|
||
<div className="mt-2 space-x-2">
|
||
<button onClick={playAudio}>▶️ Play</button>
|
||
<button onClick={pauseAudio}>⏸️ Pause</button>
|
||
<button onClick={stopAudio}>⏹️ Stop</button>
|
||
</div>
|
||
<div className="mt-1 text-sm text-gray-500">{formatTime(currentTime)}</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AudioPlayer;
|