当前位置：首页 > VUE

vue实现歌曲循环

2026-02-19 00:06:06VUE

Vue 实现歌曲循环播放的方法

在 Vue 中实现歌曲循环播放功能，可以通过以下方法实现：

使用 HTML5 Audio 对象

创建 Audio 对象并设置循环属性：

data() {
  return {
    audio: new Audio('song.mp3'),
    isPlaying: false
  }
},
methods: {
  togglePlay() {
    if (this.isPlaying) {
      this.audio.pause()
    } else {
      this.audio.loop = true // 设置循环
      this.audio.play()
    }
    this.isPlaying = !this.isPlaying
  }
}

使用第三方音频库（如 howler.js）

安装 howler.js：

npm install howler

在组件中使用：

import { Howl } from 'howler'

export default {
  data() {
    return {
      sound: null
    }
  },
  mounted() {
    this.sound = new Howl({
      src: ['song.mp3'],
      loop: true // 启用循环
    })
  },
  methods: {
    togglePlay() {
      if (this.sound.playing()) {
        this.sound.pause()
      } else {
        this.sound.play()
      }
    }
  }
}

实现播放列表循环

对于播放列表循环，可以监听音频结束事件并切换到下一首：

data() {
  return {
    currentTrack: 0,
    tracks: ['song1.mp3', 'song2.mp3', 'song3.mp3'],
    audio: null
  }
},
methods: {
  playTrack(index) {
    if (this.audio) {
      this.audio.pause()
    }
    this.currentTrack = index
    this.audio = new Audio(this.tracks[index])
    this.audio.loop = false
    this.audio.addEventListener('ended', this.nextTrack)
    this.audio.play()
  },
  nextTrack() {
    let nextIndex = (this.currentTrack + 1) % this.tracks.length
    this.playTrack(nextIndex)
  }
}

Vue 组件实现示例

创建一个可复用的音频播放器组件：

<template>
  <div>
    <button @click="toggleLoop">{{ loop ? '关闭循环' : '开启循环' }}</button>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
  </div>
</template>

<script>
export default {
  props: ['src'],
  data() {
    return {
      audio: null,
      isPlaying: false,
      loop: false
    }
  },
  mounted() {
    this.audio = new Audio(this.src)
    this.audio.addEventListener('ended', () => {
      if (this.loop) {
        this.audio.currentTime = 0
        this.audio.play()
      }
    })
  },
  methods: {
    togglePlay() {
      if (this.isPlaying) {
        this.audio.pause()
      } else {
        this.audio.play()
      }
      this.isPlaying = !this.isPlaying
    },
    toggleLoop() {
      this.loop = !this.loop
      this.audio.loop = this.loop
    }
  }
}
</script>

这些方法可以根据具体需求进行组合和调整，实现不同形式的歌曲循环播放功能。

vue实现歌曲循环