blob语音流前端播放

最新推荐文章于 2024-09-24 18:29:41 发布

Janicelily

最新推荐文章于 2024-09-24 18:29:41 发布

阅读量7.2k

点赞数 4

文章标签： Blob 语音流播放 FileReader

本文链接：https://blog.csdn.net/Beth__hui/article/details/101442681

版权

本文介绍了如何在前端处理从后端获取的blob格式语音流，通过FileReader、ArrayBuffer、DataView等对象将其转化为可播放的音频源，并在HTML audio标签中播放。详细讲解了FileReader的readAsArrayBuffer方法和onload事件，以及如何利用DataView添加wav头部信息，最终生成可播放的URL。

摘要由CSDN通过智能技术生成

首先要熟悉的几个对象

FileReader
ArrayBuffer
DataView
Int32Array
Int16Array
Int8Array

以上几个对象，对于前端来说比较陌生遥远，三言俩语说不清，具体详细的建议大家查看官方文档。以下内容中只会提及使用到的部分。

html部分

对于后端返回的 blob格式的语音流，前端如何转化成 src路径，使用audio标签进行播放。

HTML代码部分很简单，就是audio标签即可（我这里是基于vue）

<audio   controls currentTime autoplay   :src='srcUrl'>
</audio>

所以就是要解决 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