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

【问题标题】：set volume on audio tag with react通过反应在音频标签上设置音量
【发布时间】：2023-03-11 17:55:02
【问题描述】：

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

【问题讨论】：

你可以使用 useRef reactjs.org/docs/hooks-reference.html#useref
@SurjeetBhadauriya 怎么办？我已经参考了它。我正在使用 Twilio 音频。
按照链接中的建议创建一个 audioRef 实例来尝试一下，例如： const audioRef = useRef();然后使用 audioRef 访问音量，如 audioRef.volume 或 audioRef.current.volume
谢谢！它的工作@SurjeetBhadauriya
干杯！ @רועיאנגל 那你能投票给我吗？

标签： javascript reactjs twilio

【解决方案1】：

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

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

然后使用audioRef 访问该元素。

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

【讨论】：