html5 audio是一个很强大的标签,项目中用到很多的就是直接给audio标签的src赋值音频文件对应的url,关于audio,网上资料很多,这里不详细介绍。本文主要讲述在项目中使用audio遇到的坑。
项目前台使用vue框架
1.如何将文件流转化成对应的url
通过录音文件对应的uuid 获取录音对应的文件流data(bytes类型),使用
let recordSrc = URL.createObjectURL(data)创建一个可以播放的url
2.url在source中无法生效
<audio>
<source :src=‘recordSrc’></source>
</audio>
当把url赋值给source中的src属性时,在页面点击播放是无法生效的。直接在audio标签中使用src能够播放。
3.获取录音播放时长
直接获取录音播放时长会出现问题。如
play() {
this.duration = this.$refs.audio.duration
}
点击播放时会请求url对应的音频资源,这是一个异步的过程,所以在点击事件中是无法获取到播放时长的。可以给audio添加一个事件监听,当已经获取到播放资源的时候在获取播放时长。