42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React, { useRef, useState, useEffect } from "react";
|
|
|
|
interface AudioPlayerProps {
|
|
urlAudio: string;
|
|
fileName: string;
|
|
}
|
|
|
|
const AudioPlayer: React.FC<AudioPlayerProps> = ({ urlAudio, fileName }) => {
|
|
const audioRef = useRef<HTMLAudioElement>(null);
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const audio = audioRef.current;
|
|
if (!audio) return;
|
|
|
|
const updateTime = () => {
|
|
setCurrentTime(audio?.currentTime);
|
|
};
|
|
|
|
audio.addEventListener("timeupdate", updateTime);
|
|
return () => {
|
|
audio.removeEventListener("timeupdate", updateTime);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="mt-2">
|
|
<h2 className="text-lg font-semibold">{fileName}</h2>
|
|
{/* <a href={urlAudio} target="_blank">{urlAudio}</a> */}
|
|
<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;
|