純前端解碼、播放、錄音、編碼 AMR 音頻，無(wú)須服務(wù)器支持，基于 [amr.js]
注意：由于使用了 amr.js 做編碼和解碼，因此 js 文件（壓縮后，未 gzip）接近 500 KB，使用前請(qǐng)考慮。

安裝

npm i benz-amr-recorder --save

使用時(shí)引用

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>

初始化對(duì)象

data() {
  return {
    playRec: null, //播放對(duì)象
    voiceActive: null
  }
}
/******播放語(yǔ)音******/
methods: {
  //播放語(yǔ)音
  openRecording(_url, index) {
    let url = _url.split('.com')[1]
    let vm = this
    if (vm.playRec !== null) {
      vm.stopPlayVoice()
    }
    vm.playRec = new BenzAMRRecorder()
    //??注意跨域問(wèn)題
    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()
    }
  },
}