@futuremeng/vue-audio-player v1.5.13

中文文档 | English Document

Online Demo

Features

• Vue2 and Vue3 are supported
• Simple and practical
• High versatility
• Support for progress bar dragging
• Supports PC and mobile terminals
• Complete documentation and examples

Use

Step one：

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

or

yarn install -S @futuremeng/vue-audio-player

Step two：

// global import
import AudioPlayer from '@futuremeng/vue-audio-player'

Vue.use(AudioPlayer)

or

// part import
import AudioPlayer from '@futuremeng/vue-audio-player'

components: {
  AudioPlayer
}

Step three：

<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: 'audio1',
          url: 'https://www.0dutv.com/upload/dance/F25F74A0B8FF82503241801D0E2CA5CD.mp3'
        },
        {
          name: 'audio2',
          url: 'https://www.0dutv.com/upload/dance/20200316/C719452E3C7834080007662021EA968E.mp3'
        }
      ]
    }
  },

  methods: {
    // Something to do before playing
    handleBeforePlay(next) {
      // There are a few things you can do here...
      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name

      next() // Start playing
    }
  }
}
</script>

Prop

Event

Slot

Data

Call with ref，see the components for more data

Method

Call with ref，see the components for more methods

Update log

v1.5.10【2023/07/24】

• Feature：Event list-end

v1.5.8【2023/07/24】

• Feature：show-loop-button、show-info-botton、show-error-message、loopInterval、nextInterval
• Feature：loop、info

v1.5.2【2023/07/12】

• Fix: When I select double playback speed, it doesn't work when the next song is played.

v1.5.1【2023/03/29】

• Improvement: Beautify UI

v1.5.0【2022/03/20】

• Feature：Vue2 and Vue3 work fine
• Feature：Don't need import CSS file

v1.4.0【2022/03/05】

• Feature：Slot play-prev、play-start、play-pause and play-next
• Feature：play-error event
• Improvement：Appearance and layout

v1.3.0【2022/01/25】

• Improvement：Reduced package volume
• Modify：Style import changed to import '@futuremeng/vue-audio-player/lib/style.css'

v1.2.11【2021/06/17】

• Feature：disabled-progress-drag prop
• Feature：disabled-progress-click prop
• Feature：progress-start event
• Feature：progress-move event
• Feature：progress-end event
• Feature：progress-click event

FAQ

• Background playback control is not supported?
• The browser of some mobile phones is 0 after loading due to asynchronous problems
• Unable to play automatically?

• Realize custom play position or continue to play?

  Example:

  this.$refs.audioPlayer.$refs.audio.currentTime = 100 // Jump to 100 seconds

Browser compatibility

• Internet Explorer：not support
• Firefox：53 and above
• Chrome：51 and above

Reward the author with milk tea

License

MIT

Last

😘If you think it's helpful, click a 'Star',Any problem found in the process of use can be raised Issue, also very welcome to mention PR.