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

Posted 2022-01-19 水香木鱼

官网入口

---

主要用于Web端录制短音频。

支持录音，暂停，恢复，和录音播放。
支持音频数据的压缩，支持单双通道录音。
支持录音时长、录音大小的显示。
支持边录边转（播放）(0.x支持)。
支持导出录音文件，格式为pcm或wav。
支持录音波形显示，可自己定制。
录音数据支持第三方平台的语音识别。
支持MP3（借助lamejs）。

使用

demo使用

• npm ci (推荐) 或 npm install
• npm run dev

调试移动端

• npm run https

编译

npm run build

使用方法

引入方式

npm方式：
安装：

npm i js-audio-recorder

调用：

import Recorder from 'js-audio-recorder';

let recorder = new Recorder();

script标签方式

<script type="text/javascript" src="./dist/recorder.js"></script>

let recorder = new Recorder();

API

操作相关

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();

getPlayTime()获取音频已经播的时长。

返回: number。

recorder.getPlayTime();

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();

getChannelData()获取左声道和右声道音频数据。

recorder.getChannelData();

录音结束，下载录音文件downloadPCM([ filename ])

下载PCM格式

fileName String重命名文件

返回: Blob
注：使用该方法会默认调用 stop() 方法。

recorder.downloadPCM(fileName ?);

downloadWAV([ filename ])下载 WAV 格式

fileName String 重命名文件
返回: Blob
注：使用该方法会默认调用 stop() 方法。

录音中，获取录音数据
(0.x版本中生效，最新目前不支持)

该方式为边录边转换，建议在compiling 为 true 时使用。

getWholeData()获取已经录音的所有数据。

若没有开启边录边转(compiling为false)，则返回是空数组。

返回: Array, 数组中是DataView数据
定时获取所有数据：

setInterval(() => 
    recorder.getWholeData();
, 1000)

getNextData()获取前一次 getNextData() 之后的数据。

若没有开启边录边转(compiling为false)，则返回是空数组。

返回: Array, 数组中是DataView数据
定时获取新增数据：

setInterval(() => 
    recorder.getNextData();
, 1000)
// 实时录音，则可将该数据返回给服务端。

录音波形显示getRecordAnalyseData()

返回的是一个1024长的，0-255大小的Uint8Array类型。用户可以根据这些数据自定义录音波形。此接口获取的是录音时的。

let dataArray = recorder.getRecordAnalyseData();

getPlayAnalyseData()返回数据同getRecordAnalyseData()，该方法获取的是播放时的。

let dataArray = recorder.getPlayAnalyseData();

播放外部Player.play(blob)

播放外部音频，格式由浏览器的audio支持的类型决定。

Player.play(/* 放入arraybuffer数据 */);

其他

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

getPermission()获取麦克风权限。

返回：promise。

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

此处then回调与start的一致。

---

官方API入口