Audio html tag for live radio

Question

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> </> ); }

Answer 1

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);
  };