63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
|
import React, { useRef, useState, useEffect } from "react";
|
|||
|
|
|
|||
|
|
const AudioPlayer = (props: {urlAudio: string}) => {
|
|||
|
|
const audioRef = useRef<HTMLAudioElement>(null);
|
|||
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|||
|
|
const {urlAudio} = props
|
|||
|
|
|
|||
|
|
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 style={{ textAlign: "center", marginTop: "50px" }}>
|
|||
|
|
<h2>Pemutar Audio</h2>
|
|||
|
|
<audio ref={audioRef} src={urlAudio} />
|
|||
|
|
<div style={{ marginTop: "10px" }}>
|
|||
|
|
<button onClick={playAudio}>▶️ Play</button>
|
|||
|
|
<button onClick={pauseAudio}>⏸️ Pause</button>
|
|||
|
|
<button onClick={stopAudio}>⏹️ Stop</button>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ marginTop: "10px" }}>
|
|||
|
|
<span>{formatTime(currentTime)}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default AudioPlayer;
|