vue.js实现audio播放amr格式音频

纯前端解码、播放、录音、编码 AMR 音频，无须服务器支持，基于 [amr.js]
注意：由于使用了 amr.js 做编码和解码，因此 js 文件（压缩后，未 gzip）接近 500 KB，使用前请考虑。

安装

npm i benz-amr-recorder --save

使用时引用

import BenzAMRRecorder from 'benz-amr-recorder'

html部分

<div class="dialogue-item" v-if="diagItem.msgtype === 'voice'" @click="openRecording(diagItem.url, index)"
               style="cursor: pointer">
    <div class="voice">
        <img src="@/assets/img/voice.gif" alt="" v-if="voiceActive===index">
        <img src="@/assets/img/voice.png" alt="" v-else>
        <span>{{diagItem.voice.play_length}}''</span>
    </div>
</div>

初始化对象

data() {
  return {
    playRec: null, //播放对象
    voiceActive: null
  }
}
/******播放语音******/
methods: {
  //播放语音
  openRecording(_url, index) {
    let url = _url.split('.com')[1]
    let vm = this
    if (vm.playRec !== null) {
      vm.stopPlayVoice()
    }
    vm.playRec = new BenzAMRRecorder()
    //⚠️注意跨域问题
    vm.playRec.initWithUrl('/record' + url).then(function() {
      vm.voiceActive = index
      vm.playRec.play()
      vm.playRec.onEnded(function() {
        vm.voiceActive = null
      })
    }).catch((e) => {
      console.log(e)
      vm.$message.error('播放录音失败')
    })
  },
  //停止播放
  stopPlayVoice() {
    if (this.playRec.isPlaying()) {
      this.playRec.stop()
    }
  },
}