使用uni.createInnerAudioContext() 首先进入的页面背景音乐不响

分类：uni-app

uniapp

使用uni.createInnerAudioContext,播放背景音乐

this.bgmMusic = uni.createInnerAudioContext();  
            this.bgmMusic.src = "src";  
        this.bgmMusic.autoplay = true;//是否自动开始播放  
        this.bgmMusic.loop = true;//是否循环播放  
        this.bgmMusic.onPlay(function() {  
            console.log('首页背景音乐播放中');  
        });

二个页面 A和B 上面相同的代码,
如果先进入A页面,A页面背景音乐不响,在进入B页面,B页面背景音乐会响
如果先进入B页面,B页面背景音乐不响,在进入A页面,A页面背景音乐会响

首先进入其他没有 uni.createInnerAudioContext 的页面,再进入首页,首页也可以播放音乐

放在App.vue里面也不响

现在需求进入首页要播放背景音乐,而不是首页没声音,要到其他页面播放

2024-02-03 17:03 负责人:无分享

5 个回复

2***@qq.com (作者)

网上的方法 play()报错
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

// 模拟用户交互后播放  
  uni.pageScrollTo({  
    scrollTop: 0,  
    duration: 0,  
    success: () => {  
      this.bgmMusic.play();  
    }  
  });

this.bgmMusic.onCanplay(() => {  
  console.log('首页背景音乐已加载完毕');  
  this.bgmMusic.play();  
});

喜欢技术的前端 - QQ---445849201

刚试了，放到首页，可以播放，

onReady() {  
            console.log('onReady')  
            const bgAudioManager = uni.getBackgroundAudioManager();  
            bgAudioManager.title = '致爱丽丝';  
            bgAudioManager.singer = '暂无';  
            bgAudioManager.coverImgUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png';  
            bgAudioManager.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';  
        },  
注意 因为背景音频播放耗费手机电量，所以平台都有管控，需在manifest中填写申请。  

ios App平台，背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加 "UIBackgroundModes":["audio"] 才能保证音乐可以后台播放（打包成ipa生效）  
小程序平台，需在manifest.json 对应的小程序节点下，填写"requiredBackgroundModes": ["audio"]。发布小程序时平台会审核  
Android App端默认不会在通知栏出现音量控制，如需此功能，需要在插件市场单独下载原生插件，详见

2***@qq.com (作者)

是公众号浏览器打开的,只是首页不响,其他页面代码可以执行播放音乐

2024-02-04 08:58

2***@qq.com (作者)

需要一个点击事件才能播放,怎么设置自动播放啊

                this.bgmMusic = uni.createInnerAudioContext();  
                var that = this  
                wx.showModal({  
                    title: "提示",  
                    content: "是否播放背景音乐",  
                    success(res) {  
                        if (res.confirm) {  
                            that.bgmMusic.src = "src";  
                            that.bgmMusic.autoplay = true;//是否自动开始播放  
                            that.bgmMusic.loop = true;//是否循环播放  
                            that.bgmMusic.onPlay(function() {  
                                console.log('首页背景音乐播放中');  
                            });  
                        }  
                    }  
                })