UNPKG

vue-audio-x

Version:

this is a audio component for vue2.5

61 lines (50 loc) 2.01 kB
> 基于vue的自定义音频组件 ![Image text](http://wenba-ooo-qiniu.xueba100.com/85f3aeeaf7c1d8e7c81fc1d3818c98b1.png) ### 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