Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how Android WeChat Mini Programs plays background music". In daily operation, I believe many people have doubts about how Android WeChat Mini Programs plays background music. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how Android WeChat Mini Programs plays background music". Next, please follow the editor to study!

1. Realize the effect

two。 Realization principle

1 、 wx.getBackgroundAudioManager:

Gets the globally unique background audio manager. Mini Program cuts into the background, and if the audio is playing, it can continue to play. However, the background state cannot manipulate the playback status of audio by calling API.

Starting from Wechat client version 6.7.2, if you need to continue playing audio after Mini Program switches to the background, you need to configure the requiredBackgroundModes attribute in app.json. It can take effect directly on the development version and the trial version, and the official version needs to be approved.

2. Pause the playback of music in onUnload and onHide events.

3. Call playback event in onShow

4. In the event at the end of the playback, play it again to achieve the effect of circular playback.

3. The implementation code goes to the next page 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 } / / pages/effects/audioCust/index.jsPage ({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 ='Su Su's Music 'e.src = "http://music.163.com/song/media/outer/url?id=36587407.mp3" / / continue to play this music after the music has finished playing Play e.onEnded (() = > {this.player (wx.getBackgroundAudioManager ())})} in a loop, / / pause the playback when the page is unloaded (it will be played all the time without adding the page) onUnload: function () {wx.getBackgroundAudioManager () .stop () }, / / Mini Program pauses to play when it is hidden (it will always play without adding pages) onHide () {wx.getBackgroundAudioManager (). Stop ();}, toNext () {wx.navigateTo ({url:'/ pages/jsCase/draw/index', music)}}), this ends the study on "how to realize Android WeChat Mini Programs playing background music". Hope to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.