html5怎么实现发送语音消息

52次阅读
没有评论

共计 1446 个字符,预计需要花费 4 分钟才能阅读完成。

今天丸趣 TV 小编给大家分享一下 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; }};function init(config){ sampleRate = config.sampleRate;}function clearRecord(){ recBuffersL.length = 0; recLength = 0;}function record(inputBuffer){ recBuffersL.push(inputBuffer[0]); //recBuffersR.push(inputBuffer[1]); recLength += inputBuffer[0].length;}function exportRecord(type){ var bufferL = mergeBuffers(recBuffersL, recLength); var interleaved = interleave(bufferL); var dataview = encodeWAV(interleaved); var audioBlob = new Blob([dataview], { type: type }); this.postMessage(audioBlob);}

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

正文完
 
丸趣
版权声明:本站原创文章,由 丸趣 2023-08-03发表,共计1446字。
转载说明:除特殊说明外本站除技术相关以外文章皆由网络搜集发布,转载请注明出处。
评论(没有评论)