微信公众号开发

h5 小程序添加背景音乐

本文主要是介绍h5 小程序添加背景音乐,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1.新建music.js文件

const bgm = uni.createInnerAudioContext();
bgm.src = 'https://vod.qiniu.ayousi.cn/lq5Af14ZKVj3MmzcFFmcX0qlF7Yx'
bgm.loop = true;

var music = {
    //mute 表示是否是静音,,默认不静音
    playBgm({mute=false}){
        if (!bgm) return;
        if(mute){
            bgm.pause()
        }else{
            bgm.play()
        }
        
        bgm.onPause(()=>{
            console.log('暂停背景音乐');
        })
        bgm.onPlay(() => {
            console.log('开始播放音乐#######');
        })
        bgm.onError((res) => {
            console.log(res)
        })
    }
}
module.exports = music

2.我是挂载到了vue实例中,在man.js中引入

// 背景音乐
import music from '@/common/utils/music.js';
Vue.prototype.$music =music;

3.在页面中引入

// 开启背景音乐
this.$music.playBgm({
    mute: false
});
// 关闭背景音乐
this.$music.playBgm({
    mute: true
});

 

这篇关于h5 小程序添加背景音乐的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!