I need the audio player to be in real time.
Current problem: When I give the command audio.pause() and then audio.play() the player returns from where it left off and not live.
Can someone help me? I'm using react with vite.
Actual code:
import { useState } from "react";
import {
FaPlay,
FaStop,
FaVolumeUp,
FaVolumeDown,
FaVolumeOff,
FaVolumeMute,
} from "react-icons/fa";
export function Player() {
const [radioRunning, setRadioRunning] = useState(false);
const playRadio = () => {
const radio = document.getElementById("player") as HTMLAudioElement;
radio.scrollTo()
radioRunning ? radio.pause() : radio.play();
setRadioRunning(!radioRunning);
};
return (
<>
<audio loop={false} id="player">
<source
src="<my-radio-stream-link>"
type='audio/mp4; codecs="mp4a.40.5"'
/>
<source
src="<my-radio-stream-link>"
type="audio/aacp"
/>
<span>Your browser dont support that element.</span>
</audio>
<div className="w-full flex justify-center gap-8 fixed bottom-0 py-2 bg-zinc-800">
<button className="p-2">
<FaVolumeUp className="w-5 h-5 mx-auto" />
</button>
<button className="p-4 -translate-y-11 rounded-full" onClick={playRadio}>
{radioRunning ? (
<FaStop className="w-10 h-10" />
) : (
<FaPlay className="w-10 h-10" />
)}
</button>
<button className="p-2">
<FaVolumeUp className="w-5 h-5 mx-auto" />
</button>
</div>
</>
);
}
CodePudding user response:
Use your playRadio
function is way to mute instead of stoping:
const playRadio = () => {
const radio = document.getElementById("player");
radio.scrollTo()
if(!radioRunning) radio.play()
radio.muted = radioRunning;
setRadioRunning(!radioRunning);
};