1.1.0 • Published 3 years ago
zy_audio v1.1.0
A Vue.js 2.0 Component for Web.
zyAudio will stay with Vue 2.x
Install
npm:
npm i zy_audio -S
yarn:
yarn add zy_audioQuick Start
全局引入
import zyAudio from 'zy_audio' import 'zy_audio/lib/zyAudio.css'
Vue.use(zyAudio)
局部使用
import zyAudio from 'zy_audio' import 'zy_audio/lib/zyAudio.css'
components: { AudioPlayer }
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| src/v-model | 资源地址 | String | - |
| is-loop | 是否循环播放当前章节 | Boolean | true |
| forward-back | 是否显示快退、快进按钮 | Boolean | true |
| max-index | 最大索引值 | number | 0 |
| current-index | 当前播放索引值 | number | 0 |
| theme-color | 主题色 | String | #dfc190 |
| show-play-button | 是否显示播放按钮 | Boolean | true |
| show-prev-button | 是否显示上一章按钮 | Boolean | true |
| show-next-button | 是否显示下一章按钮 | Boolean | true |
| show-progress-bar | 是否显示进度条 | Boolean | true |
| disabled-drag | 进度条是否可拖拽 | Boolean | true |
| before-play | 播放开始前的钩子调用 next() 后开始播放 | (next)=>void | - |
| before-prev | 播放上一章节前的钩子调用 next() 后开始播放上一章 | (next)=>void | - |
| before-next | 播放下一章前的钩子调用 next() 后开始播放下一首章 | (next)=>void | - |
| on-time-update | 播放位置改变时触发 | function(object) | {currentTime} |
事件
| 事件 | 说明 | 回调 | 参数 |
|---|---|---|---|
| play | 播放开始后触发 | function | {type: 'play', currentTime} |
| pause | 播放暂停后触发 | function | {type: 'play', currentTime} |
| loaded-metadata | 元数据加载完成 | function(event) | - |
| on-end | 当前章节播放完回调 | function(event) | - |
| can-play | 浏览器已经可以播放媒体(同audio canplay) | function(event) | - |
| progress-move | 拖动进度条时触发 | function(event) | Number |
| setPlayRate | 设置播放速度 | - | Number |
| setLoop | 设置当前章节是否循环播放 | - | Boolean |