中文文档 | English Document
-
Vue2
andVue3
are supported - Simple and practical
- High versatility
- Support for progress bar dragging
- Supports PC and mobile terminals
- Complete documentation and examples
npm i -S @futuremeng/vue-audio-player
or
yarn install -S @futuremeng/vue-audio-player
// global import
import AudioPlayer from '@futuremeng/vue-audio-player'
Vue.use(AudioPlayer)
or
// part import
import AudioPlayer from '@futuremeng/vue-audio-player'
components: {
AudioPlayer
}
<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 | Explain | Type | Default |
---|---|---|---|
audio-list | Audio playlist | Array |
- |
playback-rates | Playrate setting list | Array<Number> |
[0.5, 1, 1.5, 2] |
show-loop-button | Whether to display the loop switch button | Boolean |
true |
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-info-botton | Whether to display the info button | Boolean |
true |
is-loop | 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 |
loop-interval | interval before return to play first | Number |
3000 |
next-interval | interval before play next | 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 | 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 |
loop | Click the loop button to change isLoop | event |
info | Click the info button to show info | event |
list-end | Triggered after audio-list to the end | event |
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 |
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 | Explain | Callback |
---|---|---|
play | Start | - |
pause | Pause | - |
playPrev | Previous | - |
playNext | Next | - |
Call with ref
,see the components for more methods
- Feature:Event list-end
- Feature:show-loop-button、show-info-botton、show-error-message、loopInterval、nextInterval
- Feature:loop、info
- Fix: When I select double playback speed, it doesn't work when the next song is played.
- Improvement: Beautify UI
- Feature:
Vue2
andVue3
work fine - Feature:Don't need import
CSS
file
- Feature:Slot
play-prev
、play-start
、play-pause
andplay-next
- Feature:
play-error
event - Improvement:Appearance and layout
- Improvement:Reduced package volume
- Modify:Style import changed to
import '@futuremeng/vue-audio-player/lib/style.css'
- 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
-
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
.