vue中浏览器录音,通过audio播放,blob音频流转换。

您所在的位置:网站首页 怎么将音频转为链接格式 vue中浏览器录音,通过audio播放,blob音频流转换。

vue中浏览器录音,通过audio播放,blob音频流转换。

2024-07-13 07:22| 来源: 网络整理| 查看: 265

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