1.实现效果
2.实现原理
1、wx.getBackgroundAudioManager ：
获取全局唯一的背景音频管理器。 小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。
从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效，正式版还需通过审核。
2、onUnload和onHide事件中暂停音乐的播放。
3、onShow中调用播放事件
4、在播放结束的事件中，再次播放，以达到循环播放的效果。
3.实现代码
<image src="{{checked?'../img/stop.png':'../img/play.png'}}" class="music {{!checked && 'circle'}}" catchtap="checkMusic"></image> <view catchtap="toNext" class="btn"> 去下一个页面</view>
page { background-color: aliceblue; } .music { width: 86rpx; height: 86rpx; position: absolute; top: 108rpx; right: 10rpx; z-index: 99; } .circle { animation: cirlce 4s linear infinite; } @keyframes cirlce { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } .btn { margin: 550rpx auto 0; width: 625rpx; height: 80rpx; background: linear-gradient(90deg, #dd8449 0%, #e28e74 52%, #dbb290 100%); border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text-align: center; position: relative; overflow: hidden; } .btn:after { content: ""; background: #999; position: absolute; width: 750rpx; height: 750rpx; left: calc(50% - 375rpx); top: calc(50% - 375rpx); opacity: 0; margin: auto; border-radius: 50%; transform: scale(1); transition: all 0.4s ease-in-out; }
Page({ data: { checked: false, }, onShow: function () { this.player(wx.getBackgroundAudioManager()) }, checkMusic() { console.log(11) this.setData({ checked: !this.data.checked }) if (this.data.checked) { wx.getBackgroundAudioManager().pause(); } else { this.player(wx.getBackgroundAudioManager()) } }, player(e) { e.title = '下次一定的音乐' e.src = "http://music.163.com/song/media/outer/url?id=36587407.mp3" //音乐播放结束后继续播放此音乐，循环不停的播放 e.onEnded(() => { this.player(wx.getBackgroundAudioManager()) }) }, // 页面卸载时候暂停播放（不加页面将一直播放） onUnload: function () { wx.getBackgroundAudioManager().stop(); }, // 小程序隐藏时候暂停播放（不加页面将一直播放） onHide() { wx.getBackgroundAudioManager().stop(); }, toNext() { wx.navigateTo({ url: '/pages/jsCase/draw/index', }) } })
