react JS中的自定义音频播放器-音量控制答案

【问题标题】：Custom Audio Player in react JS - Volume Controlreact JS中的自定义音频播放器-音量控制
【发布时间】：2022-01-22 13:55:18
【问题描述】：

我正在 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}
/>
....

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);
};

【问题讨论】：

标签： javascript reactjs html5-audio

【解决方案1】：

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

在你的 onChange 方法中这样的东西会起作用：

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

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

【讨论】：

无法添加属性卷，对象不可扩展audioPlayer.volume = e.target.value / 100;
对不起，是的。我的首选方法实际上是在给音频元素一个 id 之后只使用 document.getElementById() 。使用 ref 对象及其当前属性也可以。