vue-audio-x
Version:
this is a audio component for vue2.5
61 lines (50 loc) • 2.01 kB
Markdown
> 基于vue的自定义音频组件

### NPM
``` bash
npm install vue-audio-x -D
```
### Example
```
<template>
<div id="app">
<AudioPlayer :musicData="musicData" style="background:rgba(248, 248, 248, 0.7);" @playEndFn="playEndFn"></AudioPlayer>
</div>
</template>
<script>
import AudioPlayer form 'vue-audio-x';
export default {
name: 'App',
components: {
AudioPlayer
},
data () {
return {
musicData: {
title: "起风了",
src: "http://ting666.yymp3.com:86/new27/mljyyj/1.mp3",
audioDuration: 0,
id: 0
}
}
},
methods: {
playEndFn () {
alert('播放结束');
}
}
}
</script>
```
## Api
### 参数
| Name | Type | Default | Description |
|----------------------|-----------|--------------|--------------------------------------------------------------------|
| musicData | `Object` | | 对象(默认值如上例) |
| title | `String` | `起风了` | 音乐标题 |
| src | `String` | | 音频地址 |
| audioDuration | `Number` | `0` | (非必填)音频长度,单位秒(s),兼容部分手机(如iOS)不能获取音频就绪状态 |
| id | `Number` | `0` | (非必填)音频的唯一id值,附带此数据会记录最后一次音乐的播放进度,下次进入该音乐将直接从上次的进度开始 |
| playEndFn | `Function`| `0` | 音频播放结束的回调函数 |
### 其他说明
选择带有封面图的音频组件,可移步查询 vue-audio-cover-x