vue-audio-player音频播放器，vue音乐播放器插件

vue-audio-player音频播放器插件，vue音乐播放器

支持 Vue2 和 Vue3

简单实用

通用性高

支持进度条拖拽

支持 PC 端和移动端

完善的文档和示例

支持倍速播放

支持调整音量等常规操作

第一步

npm i -S @liripeng/vue-audio-player

第二部

// 全局引入
import AudioPlayer from '@liripeng/vue-audio-player'
Vue.use(AudioPlayer)

或者

// 局部引入
import AudioPlayer from '@liripeng/vue-audio-player'
components: {
  AudioPlayer
}

第三步

<template>
  <div>
    {{ currentAudioName || audioList[0].name }}
    <audio-player
      ref="audioPlayer"
      :audio-list="audioList.map(elm => elm.url)"
      :before-play="handleBeforePlay"
      theme-color="#ff2929"
    />
  </div>
</template>

<script>
export default {
  components: {
    AudioPlayer
  },
  data() {
    return {
      currentAudioName: '',
      audioList: [
        {
          name: 'Flight_Of_The_Silverbird',
          url: '//www.5imoban.net/view/demomusic/Flight_Of_The_Silverbird.ogg'
        },
        {
          name: '逆流成河',
          url: '//www.5imoban.net/view/demomusic/niliuchenghe.mp3'
        }
      ]
    }
  },
  methods: {
    // 播放前做的事
    handleBeforePlay(next) {
      // 这里可以做一些事情...
      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
      next() // 开始播放
    }
  }
}
</script>