js-audio-recorder 插件实现web端录音

Posted LiPK

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js-audio-recorder 插件实现web端录音相关的知识,希望对你有一定的参考价值。

介绍

js-audio-recorder是一个纯js实现的浏览器端录音插件。
目前支持以下功能:

  • 录音,暂停,恢复,和录音播放。
  • 音频数据的压缩,支持单双通道录音。
  • 录音时长、录音大小的显示。
  • 导出录音文件,格式为pcm或wav。
  • 录音波形显示,可自己定制。

相关链接

GitHub地址
官网主页地址
项目在线演示地址

前提条件

需要使用127.0.0.1或localhost尝试,因为getUserMedia在高版本的chrome下需要使用https。

安装

npm安装

npm i js-audio-recorder

引入使用

import Recorder from \'js-audio-recorder\';

let recorder = new Recorder(
    sampleBits: 16,                 // 采样位数,支持 8 或 16,默认是16
    sampleRate: 16000,              // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
    numChannels: 1,                 // 声道,支持 1 或 2, 默认是1
    // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换,默认是false
);

更多详细属性见官方文档 点击查看更多属性

常用方法

getPermission()

未给予录音权限的页面在开始录音时需要再次点击允许录音,才能真正地录音,存在丢失开始这一段录音的情况,增加方法以便用户提前获取麦克风权限。

Recorder.getPermission().then(() => 
    console.log(\'给权限了\');
, (error) => 
    console.log(`$error.name : $error.message`);
);

start()

开始录音,返回Promise

recorder.start().then(() => 
    // 开始录音
, (error) => 
    // 出错了
    console.log(`$error.name : $error.message`);
);

pause()

暂停录音,返回void

recorder.pause();

resume()

继续录音,返回void

recorder.resume();

stop()

结束录音,返回void

recorder.stop();

play()

播放录音,返回void

recorder.play();

pausePlay()

暂停播放录音,返回void

recorder.pausePlay();

resumePlay()

恢复播放录音,返回void

recorder.resumePlay();

stopPlay()

停止播放录音,返回void

recorder.stopPlay();

destroy()

销毁实例,返回Promise

// 销毁录音实例,置为null释放资源,fn为回调函数,
recorder.destroy().then(function() 
    recorder = null;
);

getPCMBlob()

获取 PCM 数据,在录音结束后使用,返回Blob
注:使用该方法会默认调用 stop() 方法。

recorder.getPCMBlob();

getWAVBlob()

获取 WAV 数据,在录音结束后使用,返回Blob
注:使用该方法会默认调用 stop() 方法。

recorder.getWAVBlob();

更多api详见文档 点击查看更多api

以上是关于js-audio-recorder 插件实现web端录音的主要内容,如果未能解决你的问题,请参考以下文章

vue项目js-audio-recorder音频插件

C# 实现 Web 打印插件

Web打印插件实现思路(C#/Winform)

玩玩Flutter Web —— 实现高德地图插件

Hikvison对接NVR实现WEB无插件开发包实现前端视频预览(htmlvuenginx代理)

LiveNVR实现安防摄像头RTSP WEB无插件直播中ONVIF预制位接口的使用说明