fork自@trsoliu/vue-audio
vue-audio-native
重写原生audio标签UI,并使之成为适合vue组件(目前更适合PC使用),使用了flex布局请注意兼容性IE10+,iOS 6.1+,Android 2.3+(如有新的需要可在issues中提)
安装
$ npm install vue-audio-native --save
使用
在 main.js
文件中引入插件并注册
# main.jsimport Vue from 'vue'import vueAudioNative from 'vue-audio-native'Vue.use(vueAudioNative)
<template><div class="home" style="margin-top: 150px;"><!--<div class="t">--><vue-audio-nativesize='small':url=url:showCurrentTime=showCurrentTime:showControls=showControls:showVolume=showVolume:showDownload=showDownload:autoplay=autoplay:hint=hint:waitBuffer=waitBuffer:downloadName=downloadName@on-change="change"@on-timeupdate="timeupdate"@on-metadata="metadata"@on-audioId="audioId"></vue-audio-native><button @click="swtichSrc(0)">音频1</button><button @click="swtichSrc(1)">音频2</button><button @click="play">开始播放</button><button @click="pause">暂停播放</button><!--</div>--></div></template><script>name: "home"{returnurlArray: "http://mp3.9ku.com/m4a/183203.m4a" "http://www.170mv.com/kw/other.web.rh01.sycdn.kuwo.cn/resource/n3/21/19/3413654131.mp3" //演示路径url: 'http://mp3.9ku.com/m4a/183203.m4a'showCurrentTime: true //默认true,是否显示当前播放时间showControls: false //默认false,true:展示原生音频播放控制条,false:展示模拟播放控制条showVolume: true //默认true,默认显示音量调节和静音按钮 true显示音量调节和静音按钮showDownload: true //默认true,默认显示下载按钮autoplay: true //默认false,自动播放有效音频(由于高版本浏览器协议限制,初始化页面时无法自动播放,可以在点击页面后手动触发)waitBuffer:true//默认true,拖拽到未加载的时间,是否需要等待加载,true:滑块位置不动,等待加载音频资源后播放,false:当滑动位置大于当前缓冲的最大位置,则重置到当前最大缓冲位置downloadName:"下载音频"//默认“下载音频”,在Chrome和火狐、同域名下,修改下载文件名称,其它保持原文件服务器名称hint: "音频正在上传中,请稍等…" //无音频情况下提示文案currentAudioId:""//当前正在播放的audio id}methods:{console}{console}{console}//切换音频地址{let t = this;turl = turlArrayindex;}//获取正在播放音频currentAudioId,可存全局,用以播放和暂停音频{thiscurrentAudioId=event;}//使用组件的id,用来开始播放录音{document;}//使用组件的id,用来暂停播放录音{document;}</script>
API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
size | 样式大小,可选值为large、small、default或者不设置 | String | default |
url | 音频地址 | String | "" |
showCurrentTime | 是否显示当前播放时间 | Boolean | true |
showControls | 是否展示原生音频播放控制条 | Boolean | false |
showVolume | 是否展示音量调节和静音按钮 | Boolean | true |
showDownload | 是否展示下载按钮 | Boolean | true |
autoplay | 自动播放有效音频(由于高版本浏览器协议限制,初始化页面时无法自动播放,可以在点击页面后手动触发) | Boolean | false |
waitBuffer | 拖拽到未加载的时间,是否需要等待加载,true:滑块位置不动,等待加载音频资源后播放,false:当滑动位置大于当前缓冲的最大位置,则重置到当前最大缓冲位置 | Boolean | true |
downloadName | 在Chrome和火狐、同域名下,修改下载文件名称,其它保持原文件服务器名称 | String | "下载音频" |
hint | 无有效播放音频时提示语 | String | "暂无有效音频..." |
events
事件名 | 说明 | 类型 | 返回值 |
---|---|---|---|
on-change | 显示播放状态发生变化时触发,true:开始播放,false:停止播放 | Boolean | true / false |
on-timeupdate | 显示播放进行的currentTime(单位:s),返回值未进行parseInt,如需可手动处理 | Number | 当前值 |
on-metadata | 返回音频元数据的所以信息 | Object | event |
on-audioId | 返回audio标签的id,用以播放和暂停音频等 | String | event |
如有新的需要可在issues中提,或者加QQ群535798405
找我.