H5音频处理——踩坑之旅

随着公司产品的业务扩展，今年算是和浏览器的录音功能硬磕上了。遇到了不少奇葩的问题以及一些更多的扩展吧~这里记录一下分享给同样遇到问题后脑壳疼的各位。

解析base64的pcm数据进行播放

这个场景还是存在的。在websocket和server的交互上可能不存在问题。但是如果是原生应用间的交互，为了保证数据的一致性，只传string的情况下就需要用到了。

1. 解析base64变为arrayBuffer.

   function base642ArrayBuffer() {
   			const binary_string = window.atob(base64); // 解析base64
         const len = binary_string.length;
         const bytes = new Uint8Array(len);
         for (let i = 0; i < len; i++) {
           bytes[i] = binary_string.charCodeAt(i);
         }
     		// 如果不`.buffer`则返回的是Unit8Array、各有各的用处吧
     		// Unit8Array可以用来做fill(0)静音操作，而buffer不行
         return bytes.buffer;
   }
   复制代码

2. 由于浏览器不能支持播放pcm数据，所以如果后端server”不方便“给你加上wav请求头.那我们需要自己造一个wav的头（也就是那44个字节）

     function buildWaveHeader(opts) {
       const numFrames = opts.numFrames;
       const numChannels = opts.numChannels || 1;
       const sampleRate = opts.sampleRate || 16000; // 采样率16000
       const bytesPerSample = opts.bytesPerSample || 2; // 位深2个字节
       const blockAlign = numChannels * bytesPerSample;
       const byteRate = sampleRate * blockAlign;
       const dataSize = numFrames * blockAlign;
   
       const buffer = new ArrayBuffer(44);
       const dv = new DataView(buffer);
   
       let p = 0;
   
       p = this.writeString('RIFF', dv, p); // ChunkID
       p = this.writeUint32(dataSize + 36, dv, p); //