Uniapp tips - set background music

There's a recent uniapp There is a need to set background music , I checked some information , Want to achieve through common components , But there are too many pages . Finally, I found a way to avoid page by page modification , And in the process of using it, I found something that could not be explained in this method, and made up for it myself , Make a note of .

1、app.vue Set the background music component

onLaunch: function() {

this.bgmMusic = uni.createInnerAudioContext();

this.bgmMusic.autoplay = true;// Auto play

this.bgmMusic.loop = true;// Loop Playback

this.bgmMusic.src = '../static/audio/bg.mp3';// Background music address

this.bgmMusic.volume = 0.3;// The volume

this.bgmMusic.onPlay(function(){

console.log(' Background music playing ');

});

},

2、 Other things that need to be stopped page Stop can be set in

Here is a place to pay attention to app.vue Objects in use getApp() Method

onLoad() {

this.bgmMusic = getApp().bgmMusic;

this.bgmMusic.stop();

this.bgmMusic.onStop(()=>{

console.log(' The background music stopped ');

});

},

Reference material ：

https://blog.csdn.net/weixin_45324044/article/details/108463019

https://uniapp.dcloud.io/api/media/audio-context

https://ask.dcloud.net.cn/question/79033