vue音乐播放实现

Vue 音乐播放实现方法

使用 HTML5 Audio API

在 Vue 项目中，可以通过 HTML5 的 <audio> 元素实现基础的音乐播放功能。创建一个组件，绑定音频源并控制播放状态。

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url"></audio>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSong: { url: 'https://example.com/song.mp3' },
      isPlaying: false
    }
  },
  methods: {
    togglePlay() {
      const audio = this.$refs.audioPlayer
      this.isPlaying ? audio.pause() : audio.play()
      this.isPlaying = !this.isPlaying
    }
  }
}
</script>

使用第三方库（如 Howler.js）

Howler.js 提供了更强大的音频控制功能，支持多浏览器兼容性和高级特性。

安装 Howler.js：

npm install howler

在 Vue 组件中使用：

<template>
  <div>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
  </div>
</template>

<script>
import { Howl } from 'howler'

export default {
  data() {
    return {
      sound: null,
      isPlaying: false
    }
  },
  mounted() {
    this.sound = new Howl({
      src: ['https://example.com/song.mp3'],
      autoplay: false,
      loop: false
    })
  },
  methods: {
    togglePlay() {
      this.isPlaying ? this.sound.pause() : this.sound.play()
      this.isPlaying = !this.isPlaying
    }
  }
}
</script>

实现播放列表功能

扩展基础播放功能，支持多首歌曲切换。

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url" @ended="nextSong"></audio>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</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
      this.isPlaying ? audio.pause() : audio.play()
      this.isPlaying = !this.isPlaying
    },
    playSong(index) {
      this.currentSongIndex = index
      this.$nextTick(() => {
        this.$refs.audioPlayer.play()
        this.isPlaying = true
      })
    },
    nextSong() {
      this.currentSongIndex = (this.currentSongIndex + 1) % this.playlist.length
      this.$nextTick(() => {
        if (this.isPlaying) {
          this.$refs.audioPlayer.play()
        }
      })
    }
  }
}
</script>

添加进度条控制

实现进度条显示和拖动功能，增强用户体验。

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url" 
           @timeupdate="updateProgress" @ended="nextSong"></audio>
    <div class="progress-bar" @click="seek">
      <div class="progress" :style="{ width: progress + '%' }"></div>
    </div>
    <span>{{ currentTime }} / {{ duration }}</span>
  </div>
</template>

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

<style>
.progress-bar {
  width: 100%;
  height: 5px;
  background: #ddd;
  cursor: pointer;
}
.progress {
  height: 100%;
  background: #42b983;
}
</style>

响应式设计优化

确保播放器在不同设备上表现一致，添加响应式布局。

@media (max-width: 768px) {
  .progress-bar {
    height: 8px;
  }
  button {
    padding: 10px 15px;
    font-size: 16px;
  }
}