当前位置：首页 > VUE

vue实现音乐上下曲

2026-01-23 11:52:49VUE

Vue 实现音乐上下曲功能

音乐播放器基础结构

在 Vue 中实现音乐上下曲功能，首先需要构建一个基本的音乐播放器组件。这个组件包含音频播放器、播放控制按钮以及播放列表。

<template>
  <div class="music-player">
    <audio ref="audioPlayer" :src="currentSong.url"></audio>
    <div class="controls">
      <button @click="play">播放</button>
      <button @click="pause">暂停</button>
      <button @click="prevSong">上一曲</button>
      <button @click="nextSong">下一曲</button>
    </div>
    <div class="playlist">
      <div v-for="(song, index) in playlist" :key="index" @click="playSong(index)">
        {{ song.name }}
      </div>
    </div>
  </div>
</template>

播放列表管理

播放列表数据通常存储在组件的 data 或 setup 函数中。Vue 3 的 Composition API 更适合管理状态。

<script>
import { ref } from 'vue'

export default {
  setup() {
    const playlist = ref([
      { name: '歌曲1', url: '/songs/song1.mp3' },
      { name: '歌曲2', url: '/songs/song2.mp3' },
      { name: '歌曲3', url: '/songs/song3.mp3' }
    ])
    const currentIndex = ref(0)
    const audioPlayer = ref(null)

    const currentSong = computed(() => playlist.value[currentIndex.value])

    return {
      playlist,
      currentIndex,
      audioPlayer,
      currentSong
    }
  }
}
</script>

上下曲功能实现

上下曲功能通过改变 currentIndex 的值来实现。需要处理边界情况，如第一首和最后一首歌曲的循环。

methods: {
  playSong(index) {
    this.currentIndex = index
    this.$refs.audioPlayer.play()
  },

  nextSong() {
    this.currentIndex = (this.currentIndex + 1) % this.playlist.length
    this.$refs.audioPlayer.play()
  },

  prevSong() {
    this.currentIndex = (this.currentIndex - 1 + this.playlist.length) % this.playlist.length
    this.$refs.audioPlayer.play()
  },

  play() {
    this.$refs.audioPlayer.play()
  },

  pause() {
    this.$refs.audioPlayer.pause()
  }
}

自动播放下一曲

监听音频结束事件，实现自动播放下一首歌曲。

mounted() {
  this.$refs.audioPlayer.addEventListener('ended', this.nextSong)
},

beforeUnmount() {
  this.$refs.audioPlayer.removeEventListener('ended', this.nextSong)
}

样式优化

为播放器添加基本样式，提升用户体验。

<style scoped>
.music-player {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.playlist div {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}

.playlist div:hover {
  background: #eee;
}
</style>