当前位置：首页 > VUE

vue实现音乐

2026-03-07 15:31:50VUE

Vue实现音乐播放功能

在Vue中实现音乐播放功能可以通过HTML5的<audio>标签或第三方库如howler.js来实现。以下是两种常见的方法：

使用HTML5 Audio标签

在Vue组件中直接使用<audio>标签，通过Vue的数据绑定和控制方法实现播放功能。

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url"></audio>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </div>
</template>

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

使用Howler.js

Howler.js是一个功能强大的音频库，支持多种格式和高级功能。

<template>
  <div>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </div>
</template>

<script>
import { Howl } from 'howler'

export default {
  data() {
    return {
      sound: null
    }
  },
  mounted() {
    this.sound = new Howl({
      src: ['https://example.com/song.mp3'],
      html5: true
    })
  },
  methods: {
    play() {
      this.sound.play()
    },
    pause() {
      this.sound.pause()
    }
  }
}
</script>

实现音乐播放列表

如果需要实现播放列表功能，可以扩展上述代码。

<template>
  <div>
    <ul>
      <li v-for="(song, index) in playlist" :key="index" @click="playSong(index)">
        {{ song.name }}
      </li>
    </ul>
    <audio ref="audioPlayer" :src="currentSong.url"></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playlist: [
        { name: '歌曲1', url: 'https://example.com/song1.mp3' },
        { name: '歌曲2', url: 'https://example.com/song2.mp3' }
      ],
      currentSong: {},
      currentIndex: 0
    }
  },
  methods: {
    playSong(index) {
      this.currentIndex = index
      this.currentSong = this.playlist[index]
      this.$nextTick(() => {
        this.$refs.audioPlayer.play()
      })
    }
  }
}
</script>

添加进度条和控制

可以为播放器添加进度显示和控制功能。

vue实现音乐

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

<script>
export default {
  data() {
    return {
      currentSong: { url: 'https://example.com/song.mp3' },
      progress: 0,
      currentTime: 0,
      duration: 0
    }
  },
  methods: {
    updateProgress() {
      this.currentTime = this.$refs.audioPlayer.currentTime
      this.duration = this.$refs.audioPlayer.duration
      this.progress = (this.currentTime / this.duration) * 100
    },
    seek(e) {
      const seekTo = this.duration * (e.target.value / 100)
      this.$refs.audioPlayer.currentTime = seekTo
    }
  }
}
</script>