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_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 | 播放开始前的钩子调用 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 |