@liripeng/vue-audio-player

Vue Audio Player Component

---

中文文档 | 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 @liripeng/vue-audio-player

Step two：

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

Vue.use(AudioPlayer)

or

// part import
import AudioPlayer from '@liripeng/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

Prop	Explain	Type	Default
audio-list	Audio playlist	Array	-
playback-rates	Playrate setting list	Array<Number>	[0.5, 1, 1.5, 2]
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
show-playback-rate	Whether to display the play rate button	Boolean	true
show-play-loading	Whether to display loading on playback	Boolean	true
isLoop	Whether the list plays in a loop	Boolean	true
disabled-progress-drag	Disable progress bar drag functionality	Boolean	false
disabled-progress-click	Disable progress bar clickable functionality	Boolean	false
progress-interval	Progress update interval	Number	1000
theme-color	Theme color	String	#e35924
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	-
play-error	Triggered after play error,The parameters are the same as those of the native 'play' method	data
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
progress-start	Trigger before moving the progress bar	event
progress-move	Triggered when moving the progress bar	event
progress-end	Triggered after moving the progress bar	event
progress-click	Click the progress bar to trigger	event

Slot

Name	Explain
play-prev	Play prev button,The replaceable button icon function remains unchanged
play-start	Play start button,The replaceable button icon function remains unchanged
play-pause	Play pause button,The replaceable button icon function remains unchanged
play-next	Play next button,The replaceable button icon function remains unchanged

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	''
playbackRate	Current playback rate of audio	1

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.5.3【2023/11/29】

• Feature: showPlayLoading prop

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 '@liripeng/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.