阅读数:

react项目中实现音频播放,自定义UI

0

说明

上一篇,我们简单的实现了音频的暂停,播放,时间更新等简单的
音频播放功能,今天我们来个进阶版,在以上基础功能基础上增加了

  • 1、支持设置片段截取播放
  • 2、支持拖动播放
  • 3、支持音量控制
  • 4、支持音频文件下载

实现

本例基于react hook实现,核心原理同上一篇,拖动音频部分和音量设置部分
主要是调用了音频api的 audio.volume 和 audio.currentTime 然后更新相对应的ui部分即可

1
2
3
4
5
6
7
8
9
10
const onAfterChange = (value, type) => {
const myVid = aRef.current;
if (type === "voice") {
myVid.volume = value;
setVolume(value);
} else {
setProcess(value);
myVid.currentTime = parseInt(String((myVid.duration * value) / 100));
}
};

想了解细节的可以留言或者加vo

效果图

audio1

最后

如有疑问或者更好的方案留言下方……^_^


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^