通过反应在音频标签上设置音量

Question

I want to control the audio volume with the power of React and not as usual with JS.

I am using Twilio for streaming audio and video. I want to write the code different than the document.getElementById('audio');

 useEffect(() => {
        const audioTrack = audioTracks[0];
        const audio = document.getElementById('audio');
        audio.volume = (guide.liveDetails.volume / 100);
        if (audioTrack && mic) {
            audioTrack.attach(audioRef.current);
            return () => {
                audioTrack.detach();
            };
        }
    }, [audioTracks, mic, guide]);

  return (
        <>
            {camera && <video ref={videoRef} autoPlay={true} />}
            <audio id="audio" ref={audioRef} autoPlay={true} muted={!mic} />
        </>
    );

Answer 1

You can use useRef instead of document as shown below

const audioRef = useRef(); // on the top of your function component

and then use audioRef to access the element.

audioRef.current.volume // use this where you want