基于JS如何实现web端录音与播放功能

　　介绍

这篇文章主要介绍了基于JS如何实现web端录音与播放功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

JS是什么

JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。

getUserMedia在非localhost和127年的情况下,需要开启https,由于腾讯云的没备案,演示就不放了,可以自行获取代码并启动测试。

<强>实现方式

实现原理的话,主要是以下三点,

<李>

利用webrtc的getUserMedia方法获取设备音频输入,使用audioprocess得到音频流(pcm流,范围1到1)。

<李>

转码,利用前端中的ArrayBuffer等二进制操作按采样位数处理流信息。

<李>

使用decodeAudioData转码ArrayBuffer到audioBuffer并播放(小文件,大文件使用音频)。

<强>使用方式

<强>脚本方式

直接引入dist下的录音机。js即可

<代码>让录音机=new记录器();

<强> npm方式

安装:

<代码> npm我js-audio-recorder

调用:

import  Recorder 得到& # 39;js-audio-recorder& # 39;; 　　let  recorder =, new 记录器();

<强> API

<>强基本方法

//,开始录音 　　recorder.start ();//,暂停录音 　　recorder.pause ();//,继续录音 　　recorder.resume ()//,结束录音 　　recorder.stop ();//,录音播放 　　recorder.play ();//,销毁录音实例,释放资源,fn为回调函数, 　　recorder.destroy (fn); 　　时间=recorder 零; 　　下载功能//,下载pcm文件 　　recorder.downloadPCM ();//,下载wav文件 　　recorder.downloadWAV ();//,重命名pcm文件,wav也支持 　　recorder.downloadPCM(& # 39;重命名& # 39;); 　　获取录音时长//,回调持续输出时长 　　时间=recorder.onprocess 函数(持续时间),{ 　　console.log才能(持续时间); 　　}//,手动获取录音时长 　　console.log (recorder.duration);

<强>默认配置

sampleBits,采样位数,默认是16
sampleRate,采样频率、浏览器默认的,我的是铬48000
numChannels声道数,默认是1

<强>传入参数

新录音机时支持传入参数,

{ 　　sampleBits才能:16日,,,,,,//,采样位数,范围8或16 　　sampleRate才能:16000年,,,,,//,采样率,范围11025,16000,22050,24000,44100,48000 　　numChannels才能:1,,,,,,//,声道,范围1或2 　　}

<>强注意

使用127.0.0.1或本地主机尝试,因为getUserMedia在高版本的铬下需要使用https。

感谢你能够认真阅读完这篇文章,希望小编分享的“基于JS如何实现web端录音与播放功能”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

基于JS如何实现web端录音与播放功能