vue中添加mp3音频文件的方法

下面是详细讲解 Vue 中添加 mp3 音频文件的方法的完整攻略。

1.准备工作

在 Vue 项目的 public 目录下创建 audio 目录，并将需要添加的 mp3 音频文件放置在该目录下。

2.添加音频标签

在需要添加音频的组件中，使用 HTML5 音频标签 audio，并为其设置 src 属性为音频文件的相对路径：

<audio src="./audio/music.mp3" controls></audio>

其中，controls 属性表示播放器应该显示标准控件，例如播放/暂停按钮和音量控制。

3.使用 Vue 组件来加载音频

如果你更喜欢使用 Vue 组件来加载音频，那么你可以先在组件中添加如下代码：

import music from "@/audio/music.mp3";

export default {
  data() {
    return {
      audio: new Audio(music),
    };
  },
  mounted() {
    this.audio.load();
  },
};

其中，import 语句用于从相对路径中加载音频文件，new Audio() 方法用于创建一个新的音频对象，this.audio.load() 方法用于预加载音频文件。

接下来，你可以在组件模板中使用 <audio> 标签，然后将其 src 属性设置为音频对象的 URL：

<audio :src="audio.src" controls></audio>

示例说明

示例 1：添加多个音频文件

如果你需要添加多个音频文件，那么你可以在 data 中定义一个包含所有音频文件的数组，并使用 v-for 循环遍历它，然后为每个音频文件创建一个音频对象。

import music1 from "@/audio/music1.mp3";
import music2 from "@/audio/music2.mp3";
import music3 from "@/audio/music3.mp3";

export default {
  data() {
    return {
      audios: [
        { id: 1, src: music1 },
        { id: 2, src: music2 },
        { id: 3, src: music3 },
      ],
    };
  },
  mounted() {
    this.audios.forEach((audio) => {
      audio.obj = new Audio(audio.src);
      audio.obj.load();
    });
  },
};

接下来，你可以在组件模板中使用 <audio> 标签，然后将其 src 属性设置为音频对象的 URL，如下所示：

<div v-for="audio in audios" :key="audio.id">
  <audio :src="audio.obj.src" controls></audio>
</div>

示例 2：添加带有自定义控件的音频

如果你需要添加带有自定义控件的音频，那么你可以使用 Vue 组件来封装音频播放器。

<template>
  <div class="audio-player">
    <audio ref="audio" :src="src" @timeupdate="updateTime"></audio>
    <div class="progress-bar">
      <div class="progress" :style="{ width: progress + '%' }"></div>
    </div>
    <div class="controls">
      <button class="play" :class="{ paused: paused }" @click="togglePlay"></button>
      <div class="time">{{ currentTime }} / {{ duration }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      audio: null,
      paused: true,
      progress: 0,
      currentTime: 0,
      duration: 0,
    };
  },
  methods: {
    togglePlay() {
      if (this.paused) {
        this.audio.play();
      } else {
        this.audio.pause();
      }
      this.paused = !this.paused;
    },
    updateTime() {
      this.currentTime = this.formatTime(this.audio.currentTime);
      this.duration = this.formatTime(this.audio.duration);
      this.progress = (this.audio.currentTime / this.audio.duration) * 100;
    },
    formatTime(time) {
      const seconds = Math.floor(time % 60);
      const minutes = Math.floor(time / 60);
      return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
    },
  },
  mounted() {
    this.audio = this.$refs.audio;
    this.audio.load();
    this.audio.addEventListener("timeupdate", this.updateTime);
  },
  beforeDestroy() {
    this.audio.removeEventListener("timeupdate", this.updateTime);
  },
};
</script>

<style>
/* 样式省略，具体可以自行定义 */
</style>

使用该组件时，你只需要在父组件中添加如下代码：

<audio-player src="./audio/music.mp3"></audio-player>

其中，src 属性表示音频文件的相对路径。