fork自@trsoliu/vue-audio

vue-audio-native

重写原生audio标签UI，并使之成为适合vue组件（目前更适合PC使用）,使用了flex布局请注意兼容性IE10+,iOS 6.1+,Android 2.3+（如有新的需要可在issues中提）

• 安装
• 使用
• API
• events

安装

$ npm install vue-audio-native --save

使用

在 main.js 文件中引入插件并注册

# main.js
import 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-native 
				size='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>
	import Vue from 'vue'
	export default {
		name: "home",
		data() {
			return {
				urlArray: ["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: {
			change(event) {
				console.log("当前播放状态：", event)
			},
			timeupdate(event) {
				console.log("当前播放时间：", event)
			},
			metadata(event) {
				console.log(event, "音频长度：", event.target.duration)
			},
			//切换音频地址
			swtichSrc(index) {
				let t = this;
				t.url = t.urlArray[index];
			},
			//获取正在播放音频currentAudioId，可存全局，用以播放和暂停音频
			audioId(event){
				this.currentAudioId=event;
			},
			//使用组件的id，用来开始播放录音
			play(){
				document.getElementById(this.currentAudioId).play();
			},
			//使用组件的id，用来暂停播放录音
			pause(){
				document.getElementById(this.currentAudioId).pause();
			}
		},
	}
</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找我.