35 lines
833 B
JavaScript
35 lines
833 B
JavaScript
import React, { useRef, useState } from "react";
|
|
|
|
const SingleAudioPlayer = ({ src }) => {
|
|
const audioRef = useRef(null);
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
|
|
const togglePlay = () => {
|
|
const audio = audioRef.current;
|
|
if (!audio) return;
|
|
|
|
if (isPlaying) {
|
|
audio.pause();
|
|
} else {
|
|
audio.play().catch((e) => {
|
|
console.warn("Playback error:", e);
|
|
});
|
|
}
|
|
|
|
setIsPlaying(!isPlaying);
|
|
};
|
|
|
|
const handleEnded = () => {
|
|
setIsPlaying(false);
|
|
};
|
|
|
|
return (
|
|
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
|
|
<button onClick={togglePlay}>{isPlaying ? "Pause" : "Play"}</button>
|
|
<span>{src.split("/").pop()}</span>
|
|
<audio ref={audioRef} src={src} onEnded={handleEnded} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SingleAudioPlayer;
|