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

7 浏览
0 Comments

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

我正在使用React JS构建一个自定义音频播放器，目前我在音频播放器的音量控制方面遇到了困难。以下是我的代码：

进度条运行良好，音量控制的逻辑应该是什么？

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

AduioPlayer.js

....

// 音量控制滑块

// 进度条

....

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

0