@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
• Support PC and mobile
• Support Nuxt SSR
• Complete documentation and examples

Use

Step one：

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

Step two：

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

Vue.use(VueAudioPlayer)

or

// part import
import VueAudioPlayer from '@liripeng/vue-audio-player'

components: {
  VueAudioPlayer
}

Step three：

<template>
  <div>
    <div class="name">
      {{ currentAudioName || audioList[0].title }}
    </div>
    <audio-player
      ref="audioPlayer"
      :audio-list="audioList"
      :before-play="handleBeforePlay"
      :show-play-loading="false"
    >
    </audio-player>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentAudioName: '',
      audioList: [
        {
          src: 'http://music.163.com/song/media/outer/url?id=317151.mp3', // Required
          title: 'Audio Title 1', // Optional，Phone lock screen music player display
          artist: 'Artist Name 1', // Optional，Phone lock screen music player display
          album: 'Album Name 1', // Optional，Phone lock screen music player display
          artwork: [
            {
              src: 'https://upload.jianshu.io/users/upload_avatars/1696356/c358e43854eb?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp',
              sizes: '512x512',
              type: 'image/jpg',
            },
          ], // Optional，Phone lock screen music player display
        },
        {
          src: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3', // Required
          title: 'Audio Title 2', // Optional，Phone lock screen music player display
        },
      ],
    }
  },

  methods: {
    // Use this function if you want to do something before you start playing
    handleBeforePlay(next) {
      this.currentAudioName =
        this.audioList[this.$refs.audioPlayer.currentPlayIndex].title

      next() // Start play
    },
  },
}
</script>

Prop

Prop	Description	Type	Default
audio-list	Audio playlist	Array<Object>	-
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	Description	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
The rest is consistent with native audio

Slot

Name	Description
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	Description	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	Description	Parameters
play	Start	(opts?: { currentTime: number }) => void
pause	Pause	-
playPrev	Previous	-
playNext	Next	-

Call with ref，see the components for more methods

Update Log

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.