微信小程序播放背景音樂的實例代碼
1.實現(xiàn)效果
2.實現(xiàn)原理
1、wx.getBackgroundAudioManager :
獲取全局唯一的背景音頻管理器。 小程序切入后臺,如果音頻處于播放狀態(tài),可以繼續(xù)播放。但是后臺狀態(tài)不能通過調用API操縱音頻的播放狀態(tài)。
從微信客戶端6.7.2版本開始,若需要在小程序切后臺后繼續(xù)播放音頻,需要在 app.json 中配置 requiredBackgroundModes 屬性。開發(fā)版和體驗版上可以直接生效,正式版還需通過審核。
2、onUnload和onHide事件中暫停音樂的播放。
3、onShow中調用播放事件
4、在播放結束的事件中,再次播放,以達到循環(huán)播放的效果。
3.實現(xiàn)代碼
<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; }
// pages/effects/audioCust/index.js 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" //音樂播放結束后繼續(xù)播放此音樂,循環(huán)不停的播放 e.onEnded(() => { this.player(wx.getBackgroundAudioManager()) }) }, // 頁面卸載時候暫停播放(不加頁面將一直播放) onUnload: function () { wx.getBackgroundAudioManager().stop(); }, // 小程序隱藏時候暫停播放(不加頁面將一直播放) onHide() { wx.getBackgroundAudioManager().stop(); }, toNext() { wx.navigateTo({ url: '/pages/jsCase/draw/index', }) } })
到此這篇關于微信小程序播放背景音樂的文章就介紹到這了,更多相關小程序播放背景音樂內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
ECMAScript5中的對象存取器屬性:getter和setter介紹
這篇文章主要介紹了ECMAScript5中的對象屬性存取器:getter和setter介紹,事實上在除ie外最新主流瀏覽器的實現(xiàn)中,任何一個對象的鍵值都可以被getter和setter方法所取代,這被稱之為“存取器屬性”,需要的朋友可以參考下2014-12-12動態(tài)顯示可輸入的字數(shù)提示還可以輸入的字數(shù)
這篇文章主要介紹了動態(tài)顯示可輸入的字數(shù)提示還可以輸入的字數(shù),需要的朋友可以參考下2014-04-04JS button按鈕實現(xiàn)submit按鈕提交效果
今天在使用表單是同時使用POST更新、刪除操作。然而form表單的 submit 且一旦提交則全部提交,所以想到的實現(xiàn)方法就是 使用button實現(xiàn),怎么實現(xiàn)呢?下面小編給大家分享JS button按鈕實現(xiàn)submit按鈕提交效果,感興趣的朋友參考下吧2016-11-11原生JavaScript實現(xiàn)批量獲取表單數(shù)據(jù)
這篇文章主要為大家詳細介紹了如何使用原生JavaScript實現(xiàn)批量獲取表單數(shù)據(jù),文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下2024-01-01