zy_audio
Version:
音频组件
58 lines (49 loc) • 2.18 kB
Markdown
> A Vue.js 2.0 Component for Web.
zyAudio will stay with Vue 2.x
## Install
```shell
npm:
npm i zy_audio -S
yarn:
yarn add zy_audio
```
## Quick 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 | 播放开始前的钩子<br>调用 next() 后开始播放 | `(next)=>void` | - |
| before-prev | 播放上一章节前的钩子<br>调用 next() 后开始播放上一章 | `(next)=>void` | - |
| before-next | 播放下一章前的钩子<br>调用 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` |