当前位置：首页 > VUE

vue怎么实现音频播放

2026-01-22 03:16:27VUE

Vue 实现音频播放的方法

使用 HTML5 `<audio>` 标签

在 Vue 模板中直接使用 <audio> 标签，通过 ref 或 v-model 控制播放。

<template>
  <div>
    <audio ref="audioPlayer" :src="audioSrc" controls></audio>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      audioSrc: 'path/to/audio.mp3'
    };
  },
  methods: {
    play() {
      this.$refs.audioPlayer.play();
    },
    pause() {
      this.$refs.audioPlayer.pause();
    }
  }
};
</script>

使用 JavaScript `Audio` 对象

通过动态创建 Audio 对象实现更灵活的音频控制。

<template>
  <div>
    <button @click="playAudio">播放</button>
    <button @click="pauseAudio">暂停</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      audio: null,
      audioSrc: 'path/to/audio.mp3'
    };
  },
  mounted() {
    this.audio = new Audio(this.audioSrc);
  },
  methods: {
    playAudio() {
      this.audio.play();
    },
    pauseAudio() {
      this.audio.pause();
    }
  }
};
</script>

使用第三方库（如 Howler.js）

对于复杂音频需求（如多音频管理、音效处理），可以集成 Howler.js。

安装 Howler.js：

npm install howler

示例代码：

<template>
  <div>
    <button @click="playSound">播放</button>
  </div>
</template>

<script>
import { Howl } from 'howler';

export default {
  methods: {
    playSound() {
      const sound = new Howl({
        src: ['path/to/audio.mp3']
      });
      sound.play();
    }
  }
};
</script>

动态切换音频源

通过响应式数据绑定动态更新音频源。

<template>
  <div>
    <audio ref="audioPlayer" :src="currentAudio" controls></audio>
    <button @click="changeAudio('new-audio.mp3')">切换音频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentAudio: 'default-audio.mp3'
    };
  },
  methods: {
    changeAudio(src) {
      this.currentAudio = src;
      this.$nextTick(() => {
        this.$refs.audioPlayer.play();
      });
    }
  }
};
</script>

音频事件监听

监听音频事件（如播放结束）实现交互逻辑。

<script>
export default {
  methods: {
    initAudio() {
      const audio = new Audio(this.audioSrc);
      audio.addEventListener('ended', () => {
        console.log('播放结束');
      });
      audio.play();
    }
  }
};
</script>