HTML5中的audio在react中的使用----语音播放进度条、倍速播放、下载等

最近做了一个将通话记录，语音转文字并可以在聊天记录里标注动机和摘要的需求，
上图只是一个小小的模块，
第一次接到使用到语音相关的需求，记录一下

上图是一个客服聊天记录的模块，语音转文字，将录音展示出来，可以音频播放，可以滑动进度条，倍速播放等等，以前自己心血来潮，使用原生js写过一个类似于网易音乐，播放音乐的播放器，包括进度条，音量调节啥的。
当然做项目吗，还是使用HTML自带的更好，省时省力高高效
我们的service后台前端工程使用的是react + ant-design + node作为中间层
后端使用的是Java
后端只需要给前端提供录音音频，再讲智能组语音转文字转成的文字传给我就好了，
在前端工程里，语音播放、倍速，进度条代码如下：

1、在state里定义了语音倍速的选择数组：

2、在render函数里渲染的时候使用audio标签，并遍历渲染倍速播放按钮，进度条啥的都有audio自带的属性实现了，就是这么简单

3、自定义切换倍速函数changeMultiple，嗯，不可避免的使用了原生JS获取了dom节点，然后给dom元素添加倍速属性playbackRate就可以了

一个小小的如上图所示的语音播放功能就实现了，

在实现需求的时候，不忘给自己充充电，顺便把video和audio自带的所有的属性、方法、事件都学习了一遍，感觉，嗯，真好用~~~

HTML5提供的video和audio提供的所有的方法属性事件：

方法：

属性：

事件：

原文地址：https://www.cnblogs.com/katydids/p/11470338.html