audio播放录音

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添加一个事件监听，当已经获取到播放资源的时候在获取播放时长。