中文文档 | English Document
Vue2
andVue3
are supported- Simple and practical
- High versatility
- Support for progress bar dragging
- Support PC and mobile
- Support Nuxt SSR
- Complete documentation and examples
npm i -S @liripeng/vue-audio-player
// global import
import VueAudioPlayer from '@liripeng/vue-audio-player'
Vue.use(VueAudioPlayer)
or
// part import
import VueAudioPlayer from '@liripeng/vue-audio-player'
components: {
VueAudioPlayer
}
<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: 'https://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: 'https://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 | 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 | 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 |
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 |
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 | Description | Parameters |
---|---|---|
play | Start | (opts?: { currentTime: number }) => void |
pause | Pause | - |
playPrev | Previous | - |
playNext | Next | - |
Call with ref
,see the components for more methods
-
The browser of some mobile phones is 0 after loading due to asynchronous problems
-
Realize custom play position or continue to play?
Example:
this.$refs.audioPlayer.$refs.audio.currentTime = 100 // Jump to 100 seconds
- Internet Explorer:not support
- Firefox:
53
and above - Chrome:
51
and above
MIT
😘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
.