UNPKG

zy_audio

Version:

音频组件

58 lines (49 loc) 2.18 kB
> 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` |