遇到此问题的情形：
单位开发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是音频后台返回音频路径

<!-- <vue-plyr v-if="assess.audio"
 :emit="['play','pause']"
  @play="play"
  @pause="pause"
>
  <audio crossorigin playsinline>
    <source width="100%" :src="assess.audio.path" type="audio/mp3" />
  </audio>
</vue-plyr> -->
<div class="audio" v-if="assess.audio" @click="play(assess.audio.path)">
  <img src="../../assets/img/playAud.png" alt="播放">
  <span>点击收听老师留言</span>
</div>

script部分

<script>
import BenzAMRRecorder from 'benz-amr-recorder'
var amr = new BenzAMRRecorder();
export default {
  name: "assessment",
  methods: {
	  	play(url) {
		  amr.initWithUrl(url).then(function() {
		    // amr.isPlaying() 返回音频的播放状态 是否正在播放 返回boolean类型
		    console.log(amr.isPlaying())
		    if(amr.isPlaying()){
		      amr.stop();
		    } else {
		      amr.play();
		    }
		  });
		}
   }
};
</script>

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