vue实现歌曲播放

Vue 实现歌曲播放功能

使用 Vue 实现歌曲播放功能通常需要结合 HTML5 的 <audio> 元素或第三方音频库（如 Howler.js）。以下是实现的基本步骤和代码示例。

基本实现（使用 HTML5 Audio）

在 Vue 组件中引入 <audio> 元素并控制播放状态：

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url"></audio>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
    <input type="range" v-model="volume" min="0" max="1" step="0.1" @input="setVolume" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSong: {
        url: 'https://example.com/song.mp3', // 替换为实际歌曲 URL
      },
      isPlaying: false,
      volume: 1,
    };
  },
  methods: {
    togglePlay() {
      const audio = this.$refs.audioPlayer;
      if (this.isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    setVolume() {
      this.$refs.audioPlayer.volume = this.volume;
    },
  },
};
</script>

使用 Howler.js 实现更复杂功能

Howler.js 提供了更丰富的音频控制功能（如多轨播放、淡入淡出等）。安装 Howler.js：

npm install howler

在 Vue 组件中使用：

<template>
  <div>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
    <input type="range" v-model="volume" min="0" max="1" step="0.1" @input="setVolume" />
  </div>
</template>

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

export default {
  data() {
    return {
      sound: null,
      isPlaying: false,
      volume: 1,
    };
  },
  mounted() {
    this.sound = new Howl({
      src: ['https://example.com/song.mp3'], // 替换为实际歌曲 URL
      autoplay: false,
      volume: this.volume,
    });
  },
  methods: {
    togglePlay() {
      if (this.isPlaying) {
        this.sound.pause();
      } else {
        this.sound.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    setVolume() {
      this.sound.volume(this.volume);
    },
  },
  beforeDestroy() {
    if (this.sound) {
      this.sound.unload();
    }
  },
};
</script>

实现播放列表功能

扩展上述代码以支持多首歌曲切换：

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url" @ended="nextSong"></audio>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
    <button @click="prevSong">上一首</button>
    <button @click="nextSong">下一首</button>
    <ul>
      <li v-for="(song, index) in playlist" :key="index" @click="playSong(index)">
        {{ song.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playlist: [
        { name: '歌曲1', url: 'https://example.com/song1.mp3' },
        { name: '歌曲2', url: 'https://example.com/song2.mp3' },
      ],
      currentSongIndex: 0,
      isPlaying: false,
    };
  },
  computed: {
    currentSong() {
      return this.playlist[this.currentSongIndex];
    },
  },
  methods: {
    togglePlay() {
      const audio = this.$refs.audioPlayer;
      if (this.isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    playSong(index) {
      this.currentSongIndex = index;
      this.isPlaying = false;
      this.togglePlay();
    },
    nextSong() {
      this.currentSongIndex = (this.currentSongIndex + 1) % this.playlist.length;
      this.isPlaying = false;
      this.togglePlay();
    },
    prevSong() {
      this.currentSongIndex = (this.currentSongIndex - 1 + this.playlist.length) % this.playlist.length;
      this.isPlaying = false;
      this.togglePlay();
    },
  },
};
</script>

添加进度条和时间显示

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url" @timeupdate="updateProgress"></audio>
    <div>
      {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
    </div>
    <input type="range" v-model="progress" max="100" @input="seek" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0,
      duration: 0,
      progress: 0,
    };
  },
  methods: {
    updateProgress() {
      const audio = this.$refs.audioPlayer;
      this.currentTime = audio.currentTime;
      this.duration = audio.duration || 0;
      this.progress = (this.currentTime / this.duration) * 100 || 0;
    },
    seek(e) {
      const audio = this.$refs.audioPlayer;
      const seekTime = (e.target.value / 100) * this.duration;
      audio.currentTime = seekTime;
    },
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
    },
  },
};
</script>

以上实现涵盖了基本播放控制、播放列表管理和进度显示功能。可根据实际需求进一步扩展，如添加歌词同步、音效调节等功能。