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 {
  data() {
    return {
      currentAudioName: '',
      audioList: [
        {
          name: '音频1',
          url: 'https://www.0dutv.com/upload/dance/F25F74A0B8FF82503241801D0E2CA5CD.mp3'
        },
        {
          name: '音频2',
          url: 'https://www.0dutv.com/upload/dance/20200316/C719452E3C7834080007662021EA968E.mp3'
        }
      ]
    }
  },

  methods: {
    // 播放前做的事
    handleBeforePlay(next) {
      // 这里可以做一些事情...
      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name

      next() // 开始播放
    }
  }
}
</script>