通過反應在音頻標簽上設置音量

Question

我想用 React 的力量來控制音量，而不是像往常一樣用 JS。

我正在使用 Twilio 流式傳輸音頻和視頻。 我想編寫不同於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

您可以使用useRef代替文檔，如下所示

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

然后使用audioRef訪問該元素。

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