这几天做了一个企业微信消息管理后台，其中语音消息存到数据库是amr格式的，不能通过HTML5的audio标签直接播放，然后就找到了benz-amr-recorder这个插件，完美解决问题。
benz-amr-recorder插件地址：https://benzleung.github.io/benz-amr-recorder/
在Angular和Vue中使用方法大同小异，本文以Angular为例来展示。如果你是vue项目，只需把click、ngif等语法改为Vue语法即可
- 下面记录一下使用步骤：
- 安装（这里只介绍npm方式安装，也可以script直接引用js文件使用，具体步骤查看https://benzleung.github.io/benz-amr-recorder/）
npm install benz-amr-recorder
- 引入（在使用的页面引入）
import BenzAMRRecoder from 'benz-amr-recorder';
3.请求完成后循环赋值（这里只展示处理音频部分）
//这里的data代表请求到的每一条消息数据，添加==voice判断，代表处理语音消息
if(data.type == 'voice'){
//amr对象不能共用，所以要为每条语音消息初始化一个amr对象
var amr = new BenzAMRRecorder();
amr.initWithUrl(`请求的amr地址`).then(function() {
data.amrTime = Math.ceil(amr.getDuration()); //获取音频总时长
});
data.amr = amr; //将初始化好的amr赋值到当前消息对象data中
}
4.html标签代码
<!-- 语音消息 -->
<!-- playVoice(item.amr)中的item.amr为当前语音消息对应的amr对象-->
<p *ngIf="item.type == 'voice'" class="voice" (click)="playVoice(item.amr)"
[ngStyle]="{'width':item.amrTime*10+'px'}">
<img src="https://adm-ms.icolor.com.cn/application/1/assets/voice.png" alt="">
<span>{{item.amrTime}}''</span>
</p>
5.方法调用
// 点击播放、暂停amr音频
playVoice(amr:any){
//amr.isPlaying()，音频播放状态，正在播放为true，否则为false；
if (amr.isPlaying()) {
amr.pause(); //暂停
} else {
amr.play(); //播放
}
}
6.最后贴一下效果图
至此，功能已经实现，css代码就不贴了，可根据自己的需求自行布局。
欢迎各位留言讨论~
