vue-audio-native一款仿原生audio vue组件

vue-audio-native

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

安装

$ 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 
                :url=url 
                :showCurrentTime=showCurrentTime 
                :showControls=showControls 
                :showDownload=showDownload 
                :autoplay=autoplay 
                :hint=hint 
                :waitBuffer=waitBuffer
                @on-change="change" 
                @on-timeupdate="timeupdate" 
                @on-metadata="metadata">
            </vue-audio-native>
            <button @click="swtichSrc(0)">音频1</button>
            <button @click="swtichSrc(1)">音频2</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:展示模拟播放控制条
                showDownload: true, //默认true,默认显示下载按钮
                autoplay: true, //默认false,自动播放有效音频(由于高版本浏览器协议限制,初始化页面时无法自动播放,可以在点击页面后手动触发)
                waitBuffer:true,//默认true,拖拽到未加载的时间,是否需要等待加载,true:滑块位置不动,等待加载音频资源后播放,false:当滑动位置大于当前缓冲的最大位置,则重置到当前最大缓冲位置
                hint: "音频正在上传中,请稍等…", //无音频情况下提示文案
            }
        },
        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];
            }
        },
    }
</script>
复制代码

API

属性说明类型默认值
url音频地址String""
showCurrentTime是否显示当前播放时间Booleantrue
showControls是否展示原生音频播放控制条Booleanfalse
showDownload是否展示下载按钮Booleantrue
autoplay自动播放有效音频(由于高版本浏览器协议限制,初始化页面时无法自动播放,可以在点击页面后手动触发)Booleanfalse
waitBuffer拖拽到未加载的时间,是否需要等待加载,true:滑块位置不动,等待加载音频资源后播放,false:当滑动位置大于当前缓冲的最大位置,则重置到当前最大缓冲位置Booleantrue
hint无有效播放音频时提示语String"暂无有效音频..."

events

事件名说明类型返回值
on-change显示播放状态发生变化时触发,true:开始播放,false:停止播放Booleantrue / false
on-timeupdate显示播放进行的currentTime(单位:s),返回值未进行parseInt,如需可手动处理Number当前值

有建议或问题可以加群qq交流535798405

github.com/trsoliu/vue…

www.npmjs.com/package/vue…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值