vue-player-audio
播放音频文件,支持设置播放时间区间(Vue@2组件)
- npm:https://www.npmjs.com/package/vue-player-audio
- demo:https://realgeoffrey.github.io/vue-player-audio/demo/index.html
安装
-
Node.js安装
npm install vue-player-audio --save
-
浏览器引用
<script src="//unpkg.com/vue-player-audio"></script>
注册组件
-
Node.js注册
-
全局注册
import Vue from 'vue'
import vuePlayerAudio from 'vue-player-audio'
Vue.use(vuePlayerAudio, { component: 'PlayerAudio' })
-
局部注册
import vuePlayerAudio from 'vue-player-audio'
export default {
components: {
PlayerAudio: vuePlayerAudio
}
}
-
浏览器注册
-
全局注册
<script>
Vue.use(vuePlayerAudio, { component: 'vue-player-audio' })
</script>
-
局部注册
<script>
new Vue({
components: {
'vue-player-audio': vuePlayerAudio
}
})
</script>
用法
-
参数
<PlayerAudio
:audio-src="音频src(必填)"
:start-second="开始秒数(0)"
:end-second="结束秒数,0表示直到音频结束,起码播放1秒(0)"
:autoplay="自动播放(false)"
:loop="循环播放(false)"
:loop-gap-millisecond="循环播放间隔时间-毫秒,起码间隔50毫秒(50)"
:controls="展示控制面板(false)"
:preload="预加载模式,none、metadata、auto('metadata')"
/>
因为兼容性问题,end-second
与start-second
最少间隔1秒,loop-gap-millisecond
最少设置50毫秒。
-
插槽
<PlayerAudio
:audio-src="音频src(必填)"
v-slot="audioData"
>
<br>
是否在播放:{{ audioData.isPlaying }}
<br>
当前时间:{{ audioData.currentSecond }}
<br>
最大时间:{{ audioData.maxSecond }}
<br>
</PlayerAudio>
可使用audiosprite等音频组合工具把多个音频文件组合成一个,然后再使用本插件的音频播放时间区间,从而减少请求数。