纯前端解码、播放、录音、编码 AMR 音频,无须服务器支持,基于amr.js 和 RecorderJs。

特性

  • 方便的 API 实现解码、播放、录音、编码 AMR 文件。
  • 支持 url 和 blob (即<input type="file">)方式获取 AMR。
  • 支持将浏览器 <audio> 所支持的音频格式(例如 MP3 或 OGG 音频)转换成 AMR 音频。
  • 编码后的 AMR 文件可下载,无须服务器。

安装

方法一:引入 js 文件

<script type="text/javascript" src="./BenzAMRRecorder.min.js"></script>

方法二:使用 npm

npm install benz-amr-recorder

var BenzAMRRecorder = require('benz-amr-recorder');

用法

播放 AMR:

var amr = new BenzAMRRecorder();

amr.initWithUrl('path/to/voice.amr').then(function() {

amr.play();

});

amr.onEnded(function() {

alert('播放完毕');

})

播放本地文件:

<input type="file" id="amr-file" accept=".amr">

var amr = new BenzAMRRecorder();

var amrFileObj = document.getElementById('amr-file');

amrFileObj.onchange = function() {

amr.initWithBlob(this.files[0]).then(function() {

amr.play();

});

}

录制 AMR:

var amrRec = new BenzAMRRecorder();

amrRec.initWithRecord().then(function() {

amrRec.startRecord();

});

下载 AMR:

window.location.href = window.URL.createObjectURL(amr.getBlob());

把 MP3 转换成 AMR (需要浏览器原生支持 MP3):

var amrFromMp3 = new BenzAMRRecorder();

amrFromMp3.initWithUrl('path/to/file.mp3').then(function() {

// 下载 amr 文件

window.location.href = window.URL.createObjectURL(amrFromMp3.getBlob());

})

API

初始化对象

/**

* 是否已经初始化

* @return {boolean}

*/

amr.isInit();

/**

* 使用浮点数据初始化

* @param {Float32Array} array

* @return {Promise}

*/

amr.initWithArrayBuffer(array);

/**

* 使用 Blob 对象初始化( <input type="file">)

* @param {Blob} blob

* @return {Promise}

*/

amr.initWithBlob(blob);

/**

* 使用 url 初始化

* @param {string} url

* @return {Promise}

*/

amr.initWithUrl(url);

/**

* 初始化录音

* @return {Promise}

*/

amr.initWithRecord();

事件

注意:事件不会叠加,也就是说,新注册的事件将覆盖掉旧的事件。

/**

* 播放

* @param {Function} fn

*/

amr.onPlay(function() {

console.log('开始播放');

});

/**

* 停止(包括播放结束)

* @param {Function} fn

*/

amr.onStop(function() {

console.log('停止播放');

});

/**

* 播放结束

* @param {Function} fn

*/

amr.onEnded(function() {

console.log('播放结束');

});

/**

* 开始录音

* @param {Function} fn

*/

amr.onStartRecord(function() {

console.log('开始录音');

});

/**

* 结束录音

* @param {Function} fn

*/

amr.onFinishRecord(function() {

console.log('结束录音');

});

播放控制

/**

* 播放

*/

amr.play();

/**

* 停止

*/

amr.stop();

/**

* 是否正在播放

* @return {boolean}

*/

amr.isPlaying();

录音控制

/**

* 开始录音

*/

amr.startRecord();

/**

* 结束录音,并把录制的音频转换成 AMR

* @return {Promise}

*/

amr.finishRecord();

/**

* 放弃录音

*/

amr.cancelRecord();

/**

* 是否正在录音

* @return {boolean}

*/

amr.isRecording();

其他

/**

* 获取音频的时间长度(单位:秒)

* @return {Number}

*/

amr.getDuration();

/**

* 获取 AMR 文件的 Blob 对象(用于下载文件)

* @return {Blob}

*/

amr.getBlob();

插件下载地址:https://download.csdn.net/download/qq_28073073/10971108

纯前端解码、播放、录音、编码 AMR 音频,无须服务器支持相关推荐

  1. android 录音与播放录音 带根据音频大小动态效果

    先看看效果图:         首先是布局文件: <?xml version="1.0" encoding="utf-8"?> <Linear ...

  2. Vue - 超详细 “纯前端“ 将阿里云 OSS 文件删除流程,支持单个 / 批量删除文件(附带完整示例运行源码,保证新手小白 100% 轻松实现删除功能)

    前言 如果您需要纯前端将文件上传到阿里云 OSS,请访问:Vue - 上传文件到阿里云 OSS 详细教程 / 各种常见问题! 本文站在新手的角度,从 0-1 完成前端 "阿里云oss&quo ...

  3. 音频编解码(软/硬编码),音频转码

    > 音频编解码(软编码) FFMpeg视频软件编解码的.B站的ijkplayer等. 音频数据的编解码- http://blog.51cto.com/ticktick/1760191 1.And ...

  4. vue 微信录音倒计时_vue的微信语音功能,录音+对接口返回amr音频播放-Go语言中文社区...

    vue的微信语音功能,录音+对接口返回amr音频播放 最近的新项目需要调用微信的录音功能,但是后台又不给音频转码,无奈之下就踏上了研究前端音频编码器这东西. 参考的GitHub仓库--Recorder ...

  5. 纯前端技术裁切合并音频方式实现

    随着5G时代的来临,音视频的领域的必将嫌弃新的浪潮,只有不断的学习才能跟的上步伐,吧啦吧啦.... 好吧前面真的编不下去了~~~,快速进入正题,这篇文章主要介绍的功能 1.选择本地音频文件 (多段) ...

  6. SpreadJS 纯前端表格控件应用案例:在线问卷系统

    由某软件公司研发的在线问卷系统,是一款通过收集网络信息,帮助问卷设计者和数据分析师们分析消费者线上行为特征和态度的系统平台,使用该系统可批量而精确地抽取目标网页中的任何数据及信息,快速实现实时的信息获 ...

  7. 音视频的流程:录制、播放、编码解码、上传下载等

    仿网易云音乐 安卓版-- https://github.com/aa112901/remusic Android本地视频播放器开发- http://blog.csdn.NET/jwzhangjie/a ...

  8. 【Android RTMP】音频数据采集编码 ( AAC 音频格式解析 | FLV 音频数据标签解析 | AAC 音频数据标签头 | 音频解码配置信息 )

    文章目录 安卓直播推流专栏博客总结 一. AAC 音频格式解析 二. FLV 音频数据标签解析 1. 分析 FLV 格式中的 AAC 音频格式数据 2. AAC 音频特殊配置 3. AAC 音频数据标 ...

  9. Android 录音机小米商业项目开源代码 AudioRecord录音暂停 播放 Wav格式(音频二)

    Android MediaRecorder录音录像 暂停 继续录音 播放 ARM格式(音频一) https://blog.csdn.net/WHB20081815/article/details/88 ...

最新文章

  1. Shell主要逻辑源码级分析(1)——SHELL运行流程
  2. CentOS7下Docker Storage Pool扩容
  3. 下列哪个不是目前python里的内置模块-python引入模块的五种方式与内置模块
  4. redis 主从模式_Redis主从模式部署文档
  5. Addr、@运算符与Pointer类型
  6. 英语 用on还是/at/还是in
  7. 《02》let 和 const 命令
  8. Python是非常优美的语言,那到底如何个美呢?
  9. 工作簿长时间空闲时自动关闭
  10. 最新汇总:一些基于深度学习的视觉里程计/SLAM开源代码
  11. 关于PF_INET和AF_INET的区别
  12. ubuntu面板的图标混乱
  13. 购物商城Web开发第二十二天
  14. vim编辑器中常用的命令
  15. 软件之美: 易用性设计的目标及准则
  16. java jsonp网络爬虫_JSOUP 爬虫
  17. 光储并网VSG系统Matlab/simulink仿真模型 系统前级直流部分包括光伏阵列、变换器、储能系统和双向dcdc变换器,后级交流子系统包括逆变器LC滤波器,交流负载
  18. 6. 项目管理之进度管理
  19. 面试官问我SpringBean生命周期,我
  20. 《响应式Web设计实践》一1.2 设备来了,设备来了

热门文章

  1. 信誉管理软件的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
  2. 怎么把线稿提取出来_PS怎么扣抠线稿?Adobe Photoshop CS6如何提取清晰的线稿
  3. xmind文件不见了处理方法
  4. 钉钉免费实现内网穿透绝对靠谱
  5. source insight 4.0 代码函数变量符号高亮
  6. vue项目将px转为rem实践
  7. 西联汇款和Bharti Airtel向印度数百万银行账户和非洲移动钱包提供实时全球支付服务
  8. [转载]前端代码规范 及 最佳实践
  9. MySql模糊查询like通配符的使用
  10. 华为Mate40和iPhone12网络舆情传播数据分析报告