更新记录

1.0.8（2023-09-13） 下载此版本

• 解决清空src后还会继续加载的问题

1.0.7（2023-07-25） 下载此版本

• 解决语法错误

1.0.6（2023-07-20） 下载此版本

• 优化音频对象实例化方法，解决重复绑定监听事件的问题

平台兼容性

使用须知

• 1、这是一个音频播放器，理论上支持所有端，不包含UI
• 2、这个插件基于官方APIuni.createInnerAudioContext()和uni.getBackgroundAudioManager()创建
• 3、支持歌词，但全局歌词显示只支持app端和h5端
• 4、有什么不懂可以加QUN 1087735942

props属性

event事件

内置方法

lyricConfig歌词配置

shareConfig分享配置（mode=='background'）

快速开始

    <yingbing-audio src="/static/test.mp3"></yingbing-audio>

自动播放（部分浏览器可能不支持）

    <yingbing-audio autoplay src="/static/test.mp3"></yingbing-audio>

开启背景播放器（H5不支持）

    <yingbing-audio mode="background" src="/static/test.mp3"></yingbing-audio>

监听事件

    <yingbing-audio src="/static/test.mp3" @canplay="handleCanplay" @play="handlePlay" @pause="handlePause"></yingbing-audio>

export default {
    methods: {
        //加载完毕
        handleCanplay (e) {
            console.log(e.duration)//播放时长
        },
        //播放事件
        handlePlay () {
            console.log('play')
        },
        //暂停事件
        handlePause () {
            console.log('pause')
        }
    }
}

添加歌词

    <yingbing-audio :lyric="lyric" :lyricConfig="lyricConfig" src="/static/test.mp3" @lyricChange="handleLyricChange"></yingbing-audio>

export default {
    data() {
        return {
            lyric: [{
                time: '0',//歌词显示的时间（单位是s）
                title: '这是第一句歌词'//歌词文本
            },{
                time: '5',
                title: '这是第二句歌词'
            },{
                time: '8',
                title: '这是第三句歌词'
            }],
            lyricConfig: {
                mode: 'overall'
            }
        }
    },
    methods: {
        //歌词改变事件
        handleLyricChange (e) {
            console.log(e)//歌词信息
        }
    }
}