vue实现歌曲循环

实现歌曲循环播放的方法

在Vue中实现歌曲循环播放可以通过多种方式完成，以下是一些常见的方法：

使用audio标签和事件监听

在Vue组件中创建一个audio元素，并绑定相关事件来实现循环播放：

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

<script>
export default {
  data() {
    return {
      currentSong: 'song.mp3',
      isPlaying: false
    }
  },
  methods: {
    togglePlay() {
      const audio = this.$refs.audioPlayer
      if(this.isPlaying) {
        audio.pause()
      } else {
        audio.play()
      }
      this.isPlaying = !this.isPlaying
    },
    handleEnded() {
      // 循环播放
      this.$refs.audioPlayer.currentTime = 0
      this.$refs.audioPlayer.play()
    }
  }
}
</script>

使用第三方音频库

可以考虑使用howler.js等专业音频库来实现更复杂的循环播放功能：

import { Howl } from 'howler'

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

实现播放列表循环

如果需要实现播放列表的循环播放，可以维护一个歌曲列表和当前索引：

export default {
  data() {
    return {
      songs: ['song1.mp3', 'song2.mp3', 'song3.mp3'],
      currentIndex: 0,
      audio: null
    }
  },
  mounted() {
    this.audio = new Audio()
    this.audio.src = this.songs[this.currentIndex]
    this.audio.addEventListener('ended', this.nextSong)
  },
  methods: {
    nextSong() {
      this.currentIndex = (this.currentIndex + 1) % this.songs.length
      this.audio.src = this.songs[this.currentIndex]
      this.audio.play()
    },
    prevSong() {
      this.currentIndex = (this.currentIndex - 1 + this.songs.length) % this.songs.length
      this.audio.src = this.songs[this.currentIndex]
      this.audio.play()
    }
  }
}

单曲循环与列表循环切换

可以添加模式切换功能，让用户选择单曲循环或列表循环：

export default {
  data() {
    return {
      loopMode: 'single', // 'single'或'list'
      // 其他数据...
    }
  },
  methods: {
    handleEnded() {
      if(this.loopMode === 'single') {
        this.audio.currentTime = 0
        this.audio.play()
      } else {
        this.nextSong()
      }
    },
    toggleLoopMode() {
      this.loopMode = this.loopMode === 'single' ? 'list' : 'single'
    }
  }
}

这些方法可以根据实际需求进行调整和组合，以实现最适合项目的歌曲循环播放功能。