vue中浏览器录音,通过audio播放,blob音频流转换。 |
您所在的位置:网站首页 › 怎么将音频转为链接格式 › vue中浏览器录音,通过audio播放,blob音频流转换。 |
html部分
对于后端返回的 blob格式的语音流,前端如何转化成 src路径,使用audio标签进行播放。 HTML代码部分很简单,就是audio标签即可(我这里是基于vue) 所以就是要解决 srcUrl即可,即把Blob语音流转化。 JS部分首先来认识一个类 —FileReader 。 FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。 其中一个方法readAsArrayBuffer(): FileReader.readAsArrayBuffer() - - 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象. FileReader.onload: 处理load事件。该事件在读取操作完成时触发。 结合onload事件,可以在 onload 事件中console.log(e),会发现e.srcElement.result是readAsArrayBuffer转化的结果。 // Blobdata 就是后端返回给你的Blob数据 const reader = new FileReader(); reader.readAsArrayBuffer(Blobdata); reader.onload = (e) => { const bufer = e.srcElement.result; const blob = this.addWavHeader(bufer, 16000, 16, 1); this.srcUrl = window.URL.createObjectURL(blob); };this.addWavHeader 函数是给这段buffer 加上头部信息,这样最后在用window.URL.createObjectURL就可以转化成播放路径。 addWavHeader(samples, sampleRateTmp, sampleBits, channelCount) { const dataLength = samples.byteLength; /* 新的buffer类,预留44bytes的heaer空间 */ const buffer = new ArrayBuffer(44 + dataLength); /* 转为 Dataview, 利用API来填充字节 */ const view = new DataView(buffer); let offset = 0; /* ChunkID, 4 bytes, 资源交换文件标识符 */ this.writeString(view, offset, 'RIFF'); offset += 4; /* ChunkSize, 4 bytes, 下个地址开始到文件尾总字节数,即文件大小-8 */ view.setUint32 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |