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} />
</>
);
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.