Android微信小程序播放背景音樂(lè)怎么實(shí)現(xiàn)

這篇文章主要介紹“Android微信小程序播放背景音樂(lè)怎么實(shí)現(xiàn)”，在日常操作中，相信很多人在Android微信小程序播放背景音樂(lè)怎么實(shí)現(xiàn)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Android微信小程序播放背景音樂(lè)怎么實(shí)現(xiàn)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

1.實(shí)現(xiàn)效果

2.實(shí)現(xiàn)原理

1、wx.getBackgroundAudioManager ：
獲取全局唯一的背景音頻管理器。 小程序切入后臺(tái)，如果音頻處于播放狀態(tài)，可以繼續(xù)播放。但是后臺(tái)狀態(tài)不能通過(guò)調(diào)用API操縱音頻的播放狀態(tài)。

從微信客戶端6.7.2版本開(kāi)始，若需要在小程序切后臺(tái)后繼續(xù)播放音頻，需要在 app.json 中配置 requiredBackgroundModes 屬性。開(kāi)發(fā)版和體驗(yàn)版上可以直接生效，正式版還需通過(guò)審核。
2、onUnload和onHide事件中暫停音樂(lè)的播放。
3、onShow中調(diào)用播放事件
4、在播放結(jié)束的事件中，再次播放，以達(dá)到循環(huán)播放的效果。
 

3.實(shí)現(xiàn)代碼

<image src="{{checked?'../img/stop.png':'../img/play.png'}}" class="music {{!checked && 'circle'}}" catchtap="checkMusic"></image>
<view catchtap="toNext" class="btn"> 去下一個(gè)頁(yè)面</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 = '蘇蘇的音樂(lè)'
    e.src = "http://music.163.com/song/media/outer/url?id=36587407.mp3"
    //音樂(lè)播放結(jié)束后繼續(xù)播放此音樂(lè)，循環(huán)不停的播放
    e.onEnded(() => {
      this.player(wx.getBackgroundAudioManager())
    })
  },

  // 頁(yè)面卸載時(shí)候暫停播放（不加頁(yè)面將一直播放）
  onUnload: function () {
    wx.getBackgroundAudioManager().stop();
  },
  // 小程序隱藏時(shí)候暫停播放（不加頁(yè)面將一直播放）
  onHide() {
    wx.getBackgroundAudioManager().stop();
  },
  toNext() {
    wx.navigateTo({
      url: '/pages/jsCase/draw/index',
    })
  }
})

到此，關(guān)于“Android微信小程序播放背景音樂(lè)怎么實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！