0.1.3 • Published 4 years ago
vue-tiny-audio
A simple vue audio component build by vue-cli
Install
npm install vue-tiny-audio --save
Usage
<template>
<tiny-audio :src="audioSrc"
:title="audioTitle"
ref="tinyAudio"
@play="onPlay"
@pause="onPause"
@end="onEnd"
@next="onNext"
@previous="onPrevious">
</tiny-audio>
</template>
<script>
import tinyAudio from 'vue-tiny-audio';
import 'vue-tiny-audio/lib/tinyAudio.css';
export default {
components: {
tinyAudio
},
data () {
return {
src: 'xxx',
title: 'xxx',
step: 10
}
}
}
</script>
props
prop | type | default | required |
---|
src | String | undefined | true |
title | String | undefined | false |
speeds | Array | 1, 1.25, 1.5, 2 | false |
step | Number | 5 | false |
events
event | description |
---|
play | audio start to play |
pause | audio pause |
end | audio complete play |
previous | click previous button |
next | click next button |
slots
slot | description | scopeData |
---|
title | the play material title | title |
control | the audio all control DOM | audio(all the data you need) |
time | the part of DOM which is related to time | audio(all the data you need) |
previous | the previous button | none |
next | the next button | none |
back | the back button | none |
forward | the forward button | none |
playOrPause | the play/pause button | status(play/pause/waiting) |
speed | the all DOM related to speed control | none |
speedLabel | the label of speed control DOM | speed |