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

Posted 水香木鱼

tags:

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

官网入口


主要用于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入口

以上是关于vue项目js-audio-recorder音频插件的主要内容,如果未能解决你的问题,请参考以下文章

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

Android 高性能音频Oboe 音频流打开后 耳机 / 音箱 插拔事件处理 ( 动态注册广播接收者监听耳机插拔事件 | 重新打开 Oboe 音频流 )

vue项目中如何通过点击事件读取音频文件的方法

电脑音箱和耳机可以同时插在机箱后面吗

解决树莓派播放音频时耳机插线了但没有声音

kali 插耳机没声音