vue播放amr格式音频

安装

该插件支持将浏览器 <audio> 所支持的音频格式（例如 MP3 或 OGG 音频）转换成 AMR 音频。

npm i benz-amr-recorder --save

引入

import BenzAMRRecorder from "benz-amr-recorder";

使用（组件可直接复制粘贴使用）

<template>
  <div class="myaudio">
    <span @click="openRecording">{{ msg }}</span>
  </div>
</template>

<script>
import BenzAMRRecorder from "benz-amr-recorder";
export default {
  props: {
    audioUrl: {
      type: String,
      required: true,
    },
  },
  name: "VueAudio",
  data() {
    return {
      amr: null, //播放对象
      msg: "点击播放",
    };
  },
  methods: {
    //播放语音
    openRecording() {
      if (this.amr !== null) {
        this.stopPlayVoice();
      }
      this.amr = new BenzAMRRecorder(); //建立
      console.log(this.amr);
      //⚠️注意跨域问题
      this.amr
        .initWithUrl(this.audioUrl) //初始化
        .then(() => {
          this.amr.play(); //播放
          this.msg = "点击暂停";
          this.amr.onEnded(() => {
            this.msg = "点击播放";
          });
        })
        .catch((e) => {
          this.msg = "点击播放";
          this.$message.error("播放录音失败");
        });
    },
    //停止播放
    stopPlayVoice() {
      if (this.amr.isPlaying()) {
        this.amr.stop();
        this.msg = "点击播放";
      }
    },
  },
};
</script> 
<style lang="scss" scoped>
.myaudio {
  span {
    color: #409eff;
  }
  span:hover {
    cursor: pointer;
  }
}
</style>

 更多使用参考benz-amr-recorder - npm