vue播放amr格式音频

最新推荐文章于 2024-10-24 19:37:06 发布

Lora_0925

最新推荐文章于 2024-10-24 19:37:06 发布

阅读量2.5k

点赞数

分类专栏： vue2 文章标签：语音识别

本文链接：https://blog.csdn.net/Lora_0925/article/details/120310495

版权

vue2 专栏收录该内容

28 篇文章

订阅专栏

这篇博客介绍了如何利用benz-amr-recorder这个npm包，在浏览器环境中将MP3或OGG等音频格式转换为AMR格式，并进行播放。通过示例代码展示了如何导入、初始化和使用该组件，以及处理播放和停止操作。注意解决跨域问题以确保正常播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

该插件支持将浏览器 <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