audio标签无法播放amr格式音频解决方案（benz-amr-recorder）

遇到此问题的情形：
单位开发app采用的Hybrid混合开发模式，有些列表页，详情页都是H5页面，我这边的框架是vue写的。最近一个项目中涉及到了视频和音频的展示和播放，因为app有安卓端和ios端，视频和音频的上传都是原生去上传的，然后再详情页中需要展示出来，ios中音频没遇到问题，因为ios自己录音生成的是.mp3格式音频，所以用audio标签可以完美播放。（audio标签支持的格式只有MP3, Wav, 和 Ogg），*

问题就出在了安卓端，项目中发现安卓录音以后生成的音频格式是amr的，所以不能播放

这时候首先想到的是让安卓处理生成音频格式，但是安卓人员说比较麻烦不好弄，项目马上就要上线了没时间整，只能从我H5这边想想办法，好吧，谁叫咋是配合人家的呢。

当时我想到的解决思路，有大神有别的解决思路欢迎交流学习

1. 前端接收到接口返回的amr音频后，做一个类型转换，amr转mp3，（虽然说一切二进制的东西都可以随便转换格式，但是本人水平有限，所以。。。）
2. 既然audio不能用，那就不用他，于是乎网上各种找资料，最后锁定benz-amr-recorder

代码部分
首先下载依赖到项目中

npm install benz-amr-recorder

然后在需要的文件中引入，完成实例化

import BenzAMRRecorder from 'benz-amr-recorder'
var amr = new BenzAMRRecorder();

最后通过click事件去控制音频的播放和暂停

play(url) {
  amr.initWithUrl(url).then(function() {
    // amr.isPlaying() 返回音频的播放状态 是否正在播放 返回boolean类型
    console.log(amr.isPlaying())
    if(amr.isPlaying()){
      amr.stop();
    } else {
      amr.play();
    }
  });
},

完整代码
html部分，注释的部分是遇到问题的部分，assess.audio.path是音频后台返回音频路径

  
  点击收听老师留言

script部分

欢迎大神指点交流，不足之处欢迎留言评论，一起进步