当前位置: 首页 > Web前端 > HTML5

purejs实现web端录音和播放功能

时间:2023-04-05 22:40:00 HTML5

purejs实现web端录音功能,功能不是特别多,在逐渐增加,详细地址:github。GetUserMedia在非localhost和127的情况下需要开启https。由于腾讯云没有备案,所以demo就不放了。您可以自行获取代码并开始测试。实现方法实现的原则主要有以下三点。使用webrtc的getUserMedia方法获取设备的音频输入,使用audioprocess获取音频流(pcm流,范围-1到1)。转码,在前端使用ArrayBuffer等二进制操作,根据采样位数对流信息进行处理。使用decodeAudioData将arraybuffer转码为audioBuffer并播放(小文件,大文件使用音频)。在distletrecorder=newRecorder();下使用脚本方式直接导入recorder.js;npm安装:npmijs-audio-recorder调用:importRecorderfrom'js-audio-recorder';letrecorder=newRecorder();API基本方法//开始录音recorder.start();//暂停录音recorder.pause();//继续录音recorder.resume()//结束录音recorder.stop();//录音回放recorder.play();//销毁录音实例,释放资源,fn为回调函数,recorder.destroy(fn);录音机=空;downloadfunction//下载pcm文件recorder.downloadPCM();//下载wav文件recorder.downloadWAV();//重命名pcm文件,wav也支持recorder.downloadPCM('rename');获取记录时长//回调连续输出时长recorder.onprocess=function(duration){console.log(duration);}//手动获取录音时长console.log(recorder.duration);默认配置是sampleBits,采样位数,默认是16sampleRate,采样频率,浏览器默认,我的chrome是48000numChannels,通道数,默认是1传入参数时newRecorder支持传入parameters,{sampleBits:16,//采样位数,范围8或16sampleRate:16000,//采样率,范围11025,16000,22050,24000,44100,48000numChannels:1,//通道,范围1或2}注意尝试使用127.0.0.1或者localhost,因为getUserMedia在高版本chrome下需要使用https。兼容性主要体现在以下几个方面:WebAudioApihttps://caniuse.com/#search=w...getUserMediahttps://caniuse.com/#search=g...TypedArrayshttps://caniuse.com/#search=t...欢迎访问和评论:记录器。其他资源基于阿里云webAudio实现简单的语音识别学习和音频播放webAudio实现pcm音频数据采集js实现pcm数据编码js将pcm转wav格式并播放