1014156094/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)

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

1014156094 / vue-audio-player