st-vue-audio-native

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找我.