抽奖小程序中用到的播放背景音乐

小程序页面添加背景音乐

第一步 ：

在全局文件app.json中添加

"requiredBackgroundModes": [
    "audio"
  ],

官方说明：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#requiredBackgroundModes

第二步：

在需要播放背景音乐的页面的.js文件里，设置一个参数控制音乐是否播放

data:{
  play:true    //音乐控制，默认是播放
}

第三步

onLoad()函数中，判断play状态是否为true，如果是true的话，调用播放音乐的函数

if (this.data.play === true) {
      this.player(wx.getBackgroundAudioManager())
    }

第四步

播放音乐的设置;

注意：

• audio.title不写或放空会报错，即使不报错ios系统也会不播放，所以必须加
• 微信小程序上线不能超过2M,音乐文件会很大，所以最好把音乐文件放在服务器后再使用

// 播放背景音乐
  player(audio) {
    var that = this
    audio.title = '瞬间的永恒'
    audio.src = 'https://redemptionmall-1256401892.cos.ap-nanjing.myqcloud.com/lottery/backend.mp3'
    //音乐播放结束后继续播放此音乐，循环不停的播放
    audio.onEnded(() => {
      that.player(wx.getBackgroundAudioManager())
    })
  },

第五步

我这里设置了播放和暂停的图标，播放时点击暂停图标就暂停，暂停图标也替换成播放，相反情况做法一致

wxml

 <image mode="widthFix" src="/images/{{play?'on.png':'off.png'}}" bindtap="handlechange"
      class="play-image {{play?'on':' '}}">
    </image>

js

 //音乐控制
  handlechange() {
    var state = this.data.play
    state = !state
    this.setData({
      play: state
    })
    if (this.data.play === true) {
      this.player(wx.getBackgroundAudioManager())
    } else {
      wx.getBackgroundAudioManager().pause();    //音乐暂停
    }
  },

第六步

离开页面音乐停止

js

/**
  * 生命周期函数--监听页面卸载
  */
  onUnload: function () {
    //离开页面是停止播放音乐
    wx.getBackgroundAudioManager().stop();
  },

题外话

我多添加了音乐播放的时候图标会转动，暂停的时候图标会静止，上面的代码也有根据play的布尔值来判断图标是否转动，转动的话就添加on这个class，具体的样式是：

/* 播放动画 */
.on {
  animation: music-rotate 16s linear infinite;
}

/* 旋转动画 */
@keyframes music-rotate {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

至此就已经完成了