小程序背景音乐

小程序背景音乐

我做这个项目的需求，用到一个背景音乐的播放和暂停；
当用户点击进入音乐界面的时候用户需要手动点击播放对应的音乐，那么播放以后推出音乐界面这个音乐还是处于播放状态，以及音乐的图标的状态也一个是播放。so看看代码吧！
那这里用到了一个新的api 知点，wx.createInnerAudioContext，可以参考小程序官方文档 wx.createInnerAudioContext

具体属性
innerAudioContext.autoplay = true 是否自动播放
innerAudioContext.src=“url” 音乐路径
方法 innerAudioContext.onPlay() 播放
InnerAudioContext.pause() 暂停

首先看一下我的目录结构

我的照片放在了images里。主页面是ceshi.wxml ，音乐播放界面是index.wxml

开始上菜，ceshi.wxml

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

ceshi.js

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

index.wxml

<!--   背景音乐  -->
<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

/* 背景音乐  */

.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

// 背景音乐
const innerAudioContext = wx.createInnerAudioContext()
Page({
  /**
 - 页面的初始数据
   */
  data: {
    mp3: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46',

    // 背景音乐
    bgm: false,
  },

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

    } else {
      that.setData({
        bgm: true,
        bgmImgAni: "bgmImgAni"
      })
      
      // 播放音乐
      innerAudioContext.autoplay = true
      innerAudioContext.loop = true
      innerAudioContext.src = that.data.mp3;
      innerAudioContext.play()
    }
  },
  /**
 - 生命周期函数--页面卸载时
   */
  onUnload() {
    wx.setStorageSync("bgm", this.data.bgm)
  },
  /**
 - 生命周期函数--监听页面加载
   */
  onLoad: function(e) {
    var bgm = wx.getStorageSync("bgm")
    this.setData({
      bgm
    })
  },
})