Vue.js实现音乐播放器的代码示例

template

data

methods

<template>
  <div class="music-player">
    <h2>{{ currentSong.title }}</h2>
    <audio ref="audio" :src="currentSong.src" @ended="nextSong"></audio>
    <button @click="togglePlay">{{ isPlaying ? 'Pause' : 'Play' }}</button>
    <button @click="prevSong">Previous</button>
    <button @click="nextSong">Next</button>
    <input type="range" v-model="volume" @change="setVolume" min="0" max="1" step="0.01">
    <ul>
      <li v-for="(song, index) in playlist" :key="index" @click="playSong(index)">
        {{ song.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playlist: [
        { title: 'Song 1', src: 'song1.mp3' },
        { title: 'Song 2', src: 'song2.mp3' },
        { title: 'Song 3', src: 'song3.mp3' }
      ],
      currentSong: { title: 'Song 1', src: 'song1.mp3' },
      isPlaying: false,
      volume: 0.5
    };
  },
  methods: {
    togglePlay() {
      if (this.isPlaying) {
        this.$refs.audio.pause();
      } else {
        this.$refs.audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    prevSong() {
      const currentIndex = this.playlist.findIndex(song => song.src === this.currentSong.src);
      const newIndex = (currentIndex - 1 + this.playlist.length) % this.playlist.length;
      this.playSong(newIndex);
    },
    nextSong() {
      const currentIndex = this.playlist.findIndex(song => song.src === this.currentSong.src);
      const newIndex = (currentIndex + 1) % this.playlist.length;
      this.playSong(newIndex);
    },
    playSong(index) {
      this.currentSong = this.playlist[index];
      this.$refs.audio.load();
      this.$refs.audio.play();
      this.isPlaying = true;
    },
    setVolume() {
      this.$refs.audio.volume = this.volume;
    }
  }
};
</script>

<style scoped>
.music-player {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 0 auto;
}
</style>

vue-audio-visual