html5怎么实现发送语音消息

来源：恒创科技编辑：恒创科技编辑部

2024-01-31 13:27:59

今天小编给大家分享一下html5怎么实现发送语音消息的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

实现思路

1、使用 getUserMedia 需要考虑各个浏览器的差异

2、使用 WebWorker 来处理录音及音频转换。

3、转为 Base64 格式的 WAV，用于浏览器播放（此处需要注意，可以转换 Blob 直接播放，此处为了说明转换音频的接口，所以转为 Baes64）。

具体实现

1、开始录音：RongRecorder.record();

　调用此方法开始录音。

2、停止录音：RongRecorder.stop();

　调用此方法停止录音。

3、停止并导出：RongRecorder.stopAndExport(type,callback);

　　调用此方法停止并导出音频为指定的 type 类型

4、导出：RongRecorder.exportRecord(type);

　　导出指定 type 类型的音频流。

5、清空本地音频流：RongRecorder.clear();

演示

1、兼容 getUserMedia 代码片段

navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia; 2、WebWorker 代码片段

this.onmessage=function(e){switch(e.data.command){case'init':init(e.data.config);break;case'record':record(e.data.buffer);break;case'exportRecord':exportRecord(e.data.type);break;case'clearRecord':clearRecord();break;}};functioninit(config){sampleRate=config.sampleRate;}functionclearRecord(){recBuffersL.length=0;recLength=0;}functionrecord(inputBuffer){recBuffersL.push(inputBuffer[0]);//recBuffersR.push(inputBuffer[1]);recLength+=inputBuffer[0].length;}functionexportRecord(type){varbufferL=mergeBuffers(recBuffersL,recLength);varinterleaved=interleave(bufferL);vardataview=encodeWAV(interleaved);varaudioBlob=newBlob([dataview],{type:type});this.postMessage(audioBlob);}

以上就是“html5怎么实现发送语音消息”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注恒创行业资讯频道。

本文地址：https://www.henghost.com/jishu/20479/