/vue-audio-player

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

Primary LanguageVueMIT LicenseMIT

Vue Audio Player Component

npm version Build Status

中文文档

Demo

Features

  • Complete documentation and examples
  • Support for progress bar dragging (a small package is introduced on the PC to simulate Touch events，tutorial）
  • Native CSS, no need to introduce Less, Scss and other precompiled languages

Use

Step one：

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

Step two：

// global import
import AudioPlayer from '@liripeng/vue-audio-player'
import '@liripeng/vue-audio-player/lib/vue-audio-player.css'

Vue.use(AudioPlayer)

or

// part import
import AudioPlayer from '@liripeng/vue-audio-player'
import '@liripeng/vue-audio-player/lib/vue-audio-player.css'

components: {
  AudioPlayer
}

Step Three：

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

Prop Explain Type Default
audio-list Audio playlist Array -
show-play-button Whether to display the play button Boolean true
show-prev-button Whether to display the previous button Boolean true
show-next-button Whether to display the next button Boolean true
show-volume-button Whether to display the volume button Boolean true
show-progress-bar Whether to display a progress bar Boolean true
isLoop Whether the list plays in a loop Boolean true
progressInterval Progress update interval Number 1000
before-play The callback function before the play starts
The play starts after next() is called		 (next)=>void -
before-prev Play the previous callback function
After calling next(), the previous song starts playing		 (next)=>void -
before-next Play the callback function before the next song
After calling next(), the next song starts playing		 (next)=>void -
The rest is consistent with native audio

Event

Event Explain Callback
play Triggers when the play starts -
pause Trigger after play pause -
play-prev Triggers after playing the previous song -
play-next Triggers after playing the next song -
playing The play fires every progressInterval second -
timeupdate Triggered when the current play position is sent to change event
loadedmetadata The run script is triggered when the duration of the media element and other media have loaded data event
ended Trigger after audio playback event
The rest is consistent with native audio

Data

Variable Explain Default
currentPlayIndex The audio index currently playing 0
isPlaying Whether the audio is playing false
duration Audio duration ''
currentTime Current playback time of audio ''

Call with ref，see the components for more data

Method

Method Explain Callback
play Start -
pause Pause -
playPrev Previous -
playNext Next -

Call with ref，see the components for more methods

Update log

v1.2.0【2020/12/28】

  • Modify：The way packages are introduced locally

v1.1.1【2020/12/11】

  • Fix：Incoming packet error

v1.1.0【2020/12/11】

  • Feature：Volume adjustment function
  • Feature：show-volume-button prop
  • Feature：is-auto-playNext prop
  • Feature：Failure to play automatically plays the next song，is-auto-playNext is false The next song will not automatically play
  • Feature：Loading svg animation，You can override the color with CSS
  • Modify：play event
  • Modify：Class Name

v1.0.8【2020/11/17】

v1.0.7【2020/10/02】

v1.0.6【2020/04/28】

  • Improvement：remove babel-polyfill

v1.0.5【2019/11/21】

  • Fix：#5

v1.0.4【2019/10/16】

  • Fix：isLoop
  • Modify：Class name
  • Modify：Remove Less

License

MIT

FAQ

  • Background playback control is not supported?#21

Last

Any problem found in the process of use can be raised Issue, also very welcome to mention PR.