当前位置：首页 > VUE

Vue实现音乐列表

2026-02-18 05:52:13VUE

Vue实现音乐列表的方法

使用Vue实现音乐列表需要结合数据绑定、组件化和音频播放功能。以下是具体实现步骤：

数据准备

创建音乐数据数组，包含歌曲名称、歌手、封面图和音频文件路径：

data() {
  return {
    songs: [
      {
        title: '歌曲1',
        artist: '歌手1',
        cover: 'cover1.jpg',
        src: 'music1.mp3'
      },
      // 更多歌曲...
    ],
    currentSong: null,
    isPlaying: false
  }
}

模板结构

在模板中渲染音乐列表并添加播放控制：

<div class="music-player">
  <ul class="song-list">
    <li v-for="(song, index) in songs" 
        :key="index"
        @click="playSong(song)"
        :class="{ active: currentSong === song }">
      <img :src="song.cover" alt="封面">
      <div class="song-info">
        <h3>{{ song.title }}</h3>
        <p>{{ song.artist }}</p>
      </div>
    </li>
  </ul>

  <audio ref="audioPlayer" 
         @ended="onSongEnded"
         @timeupdate="updateProgress"></audio>
</div>

播放控制方法

实现核心播放控制逻辑：

methods: {
  playSong(song) {
    this.currentSong = song
    this.$refs.audioPlayer.src = song.src
    this.$refs.audioPlayer.play()
    this.isPlaying = true
  },

  togglePlay() {
    if (this.isPlaying) {
      this.$refs.audioPlayer.pause()
    } else {
      this.$refs.audioPlayer.play()
    }
    this.isPlaying = !this.isPlaying
  },

  onSongEnded() {
    const currentIndex = this.songs.indexOf(this.currentSong)
    const nextIndex = (currentIndex + 1) % this.songs.length
    this.playSong(this.songs[nextIndex])
  }
}

样式设计

添加基础样式美化音乐列表：

.song-list {
  list-style: none;
  padding: 0;
}

.song-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  transition: background 0.3s;
}

.song-list li:hover {
  background: #f5f5f5;
}

.song-list li.active {
  background: #e0e0e0;
}

.song-list img {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  border-radius: 4px;
}

.song-info h3 {
  margin: 0 0 5px 0;
}

.song-info p {
  margin: 0;
  color: #666;
}

进阶功能

添加进度条控制

<input type="range" 
    v-model="progress"
    @input="seekAudio"
    min="0" 
    :max="duration">

实现音量控制

data() {
return {
 volume: 0.7
}
},
watch: {
volume(newVal) {
 this.$refs.audioPlayer.volume = newVal
}
}

添加播放模式切换（顺序/随机/单曲循环）

Vue实现音乐列表

data() {
return {
 playMode: 'sequence' // sequence, random, loop
}
},
methods: {
onSongEnded() {
 if (this.playMode === 'loop') {
   this.$refs.audioPlayer.currentTime = 0
   this.$refs.audioPlayer.play()
   return
 }

 const currentIndex = this.songs.indexOf(this.currentSong)
 let nextIndex

 if (this.playMode === 'random') {
   nextIndex = Math.floor(Math.random() * this.songs.length)
 } else {
   nextIndex = (currentIndex + 1) % this.songs.length
 }

 this.playSong(this.songs[nextIndex])
}
}