快捷導(dǎo)航

小程序?qū)崿F(xiàn)背景音樂(lè)播放和暫停

更新時(shí)間：2020年06月19日 16:07:14 作者：Rechal_Mei

這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)背景音樂(lè)播放和暫停，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了小程序背景音樂(lè)，供大家參考，具體內(nèi)容如下

我做這個(gè)項(xiàng)目的需求，用到一個(gè)背景音樂(lè)的播放和暫停；
當(dāng)用戶(hù)點(diǎn)擊進(jìn)入音樂(lè)界面的時(shí)候用戶(hù)需要手動(dòng)點(diǎn)擊播放對(duì)應(yīng)的音樂(lè)，那么播放以后推出音樂(lè)界面這個(gè)音樂(lè)還是處于播放狀態(tài)，以及音樂(lè)的圖標(biāo)的狀態(tài)也一個(gè)是播放。so看看代碼吧！
那這里用到了一個(gè)新的api 知點(diǎn)，wx.createInnerAudioContext，可以參考小程序官方文檔 wx.createInnerAudioContext

具體屬性

innerAudioContext.autoplay = true 是否自動(dòng)播放
innerAudioContext.src=“url” 音樂(lè)路徑
方法 innerAudioContext.onPlay() 播放
InnerAudioContext.pause() 暫停

首先看一下我的目錄結(jié)構(gòu)

我的照片放在了images里。主頁(yè)面是ceshi.wxml ，音樂(lè)播放界面是index.wxml

開(kāi)始上菜，ceshi.wxml

<button bindtap='click'>click me</button>

ceshi.js

click(){
 wx.navigateTo({
 url: '../index/index',
 })
 },

index.wxml

<!-- 背景音樂(lè) -->
<view class='bgmView' catchtap='BGM'>
 <image wx:if='{{bgm}}' class='bgmImg {{bgmImgAni}}' src='/images/kaishi.png'></image>
 <image wx:else class='bgmImg' src='/images/zanting.png'></image>
</view>

index.wxss

/* 背景音樂(lè) */

.bgmView {
 position: fixed;
 top: 20rpx;
 right: 20rpx;
 z-index: 99;
}

.bgmImg {
 width: 70rpx;
 height: 70rpx;
}

.bgmImgAni {
 animation: jumpball 4s infinite linear;
}

@keyframes jumpball {
 100% {
 transform: rotate(360deg);
 }

index.js

// 背景音樂(lè)
const innerAudioContext = wx.createInnerAudioContext()
Page({
 /**
 - 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 mp3: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46',

 // 背景音樂(lè)
 bgm: false,
 },

 // 背景音樂(lè)
 BGM: function(e) {
 let that = this;
 if (that.data.bgm) {
  that.setData({
  bgm: false,
  })
  innerAudioContext.pause(); /** 暫停音樂(lè) */

 } else {
  that.setData({
  bgm: true,
  bgmImgAni: "bgmImgAni"
  })
  
  // 播放音樂(lè)
  innerAudioContext.autoplay = true
  innerAudioContext.loop = true
  innerAudioContext.src = that.data.mp3;
  innerAudioContext.play()
 }
 },
 /**
 - 生命周期函數(shù)--頁(yè)面卸載時(shí)
 */
 onUnload() {
 wx.setStorageSync("bgm", this.data.bgm)
 },
 /**
 - 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 */
 onLoad: function(e) {
 var bgm = wx.getStorageSync("bgm")
 this.setData({
  bgm
 })
 },
})

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: