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

Posted 2023-03-24

【中文标题】react JS中的自定义音频播放器-音量控制

【英文标题】：Custom Audio Player in react JS - Volume Control

【发布时间】：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);
;

【参考方案1】：

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

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

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

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

【讨论】：

无法添加属性卷，对象不可扩展audioPlayer.volume = e.target.value / 100;

对不起，是的。我的首选方法实际上是在给音频元素一个 id 之后只使用 document.getElementById() 。使用 ref 对象及其当前属性也可以。