IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue项目js-audio-recorder音频插件 -> 正文阅读

[JavaScript知识库]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入口

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-16 17:34:47  更:2021-12-16 17:35:07 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 10:33:19-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码