React JS 中的自定义音频播放器 - 音量控制

Question

我正在用 React JS 构建一个自定义音频播放器，我目前无法控制音频播放器中的音量

这是我的代码

进度条工作正常，音量控制背后的逻辑是什么

const [currentTime, setCurrentTime] = useState(0);
const progressBar = useRef();
const audioPlayer = useRef();

AduioPlayer.js

....
<audio
    ref={audioPlayer}
    src="something.mp3"
    preload="auto"
    volume
  ></audio>
// Volume Control Range slider
<input
    type="range"
    defaultValue="0"
    className="mx-2 progressBarvolume bar volume"
/>

// Progress Bar 
<input
    type="range"
    className="progressBar bar"
    defaultValue="0"
    ref={progressBar}
    onChange={changeRange}
/>
....

变化范围函数：

const changeRange = () => {
    audioPlayer.current.currentTime = progressBar.current.value;
    changePlayerCurrentTime();
};

changePlayerCurrentTime 函数：

const changePlayerCurrentTime = () => {
    progressBar.current.style.setProperty(
        "--seek-before-width",
        `${(progressBar.current.value / duration) * 100}%`
    );
    setCurrentTime(progressBar.current.value);
};

Answer 1

音频 HTML 元素具有您可以访问的音量属性。您需要在音频滑块中设置 onChange 事件。

您的 onChange 方法中的类似内容将起作用：

audioPlayer.current.volume = e.target.value / 100;

其中 e 是传递给 onChange 方法的 ChangeEvent。

React JS 中的自定义音频播放器 - 音量控制

Custom Audio Player in react JS - Volume Control

javascript

html5-audio

reactjs