当前位置：首页 > VUE

vue 实现音乐

2026-01-08 01:13:58VUE

Vue 实现音乐播放功能

在 Vue 中实现音乐播放功能，可以通过 HTML5 的 <audio> 元素或第三方库如 howler.js 来实现。以下是两种方法的详细步骤：

使用 HTML5 `<audio>` 元素

创建音频组件 在 Vue 组件中，可以直接使用 <audio> 标签来控制音乐播放。

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

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

控制播放状态 通过 ref 获取 <audio> 元素的引用，调用其 play() 和 pause() 方法控制播放。

监听事件 <audio> 元素提供多种事件，如 ended、timeupdate 等，可用于实现更复杂的功能。

vue 实现音乐

mounted() {
  this.$refs.audioPlayer.addEventListener('ended', () => {
    console.log('播放结束')
  })
}

使用 `howler.js` 库

安装 howler.js 通过 npm 或 yarn 安装 howler.js。
```
npm install howler
```

创建音频播放器 在 Vue 组件中引入 howler.js 并创建音频实例。

vue 实现音乐

<template>
  <div>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </div>
</template>

<script>
import { Howl } from 'howler'

export default {
  data() {
    return {
      sound: null
    }
  },
  mounted() {
    this.sound = new Howl({
      src: ['path/to/music.mp3'],
      autoplay: false,
      loop: false
    })
  },
  methods: {
    play() {
      this.sound.play()
    },
    pause() {
      this.sound.pause()
    }
  }
}
</script>

高级功能 howler.js 支持音量控制、循环播放、多音频管理等高级功能。

methods: {
  setVolume(volume) {
    this.sound.volume(volume)
  },
  toggleLoop() {
    this.sound.loop(!this.sound.loop())
  }
}

实现播放列表

管理歌曲列表 使用数组存储歌曲列表，并通过索引切换当前播放的歌曲。

data() {
  return {
    songs: ['song1.mp3', 'song2.mp3', 'song3.mp3'],
    currentIndex: 0
  }
},
computed: {
  currentSong() {
    return this.songs[this.currentIndex]
  }
},
methods: {
  next() {
    this.currentIndex = (this.currentIndex + 1) % this.songs.length
    this.play()
  },
  prev() {
    this.currentIndex = (this.currentIndex - 1 + this.songs.length) % this.songs.length
    this.play()
  }
}

UI 增强 可以添加进度条、歌词显示等 UI 元素来提升用户体验。

<template>
  <div>
    <input type="range" v-model="progress" @input="seek">
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    seek() {
      this.$refs.audioPlayer.currentTime = this.progress
    }
  }
}
</script>