@futuremeng/vue-audio-player

v1.5.13

Published

a month ago

Simple and practical Vue audio player component for PC mobile terminal（简单实用的 PC 移动端的 Vue 音频播放器组件）

Downloads

187

0High
0Medium
0Low

futuremeng

futuremeng liripeng vue-audio-player vue-audio vue-music audio-player audio 音频音乐播放器

中文文档 | 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

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

Step two：

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

Vue.use(AudioPlayer)

// 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.