BackgroundAudioManager实现背景音乐

本例中的背景音乐，在小程序切至后台时，如果音频处于播放状态，可以继续播放。
在小程序全局配置 app.json中，有一项属性： requiredBackgroundModes，用于声明 需要后台运行的能力，比如 requiredBackgroundModes:["audio","location"]，即需要后台播放音乐、需要后台定位。
要实现背景音频，小程序提供了 BackgroundAudioManager实例，该实例可以通过wx.getBackgroundAudioManager获取。
本例中会涉及BackgroundAudioManager的如下属性和方法，

• title，音频标题
• epname，专辑名
• singer，歌手名
• coverImgUrl，音频封面
• pause()，暂停音频
• play()，播放音频
• onCanPlay(callback)，音频一旦进入 可播放状态，就会触发该事件。

搭建音频服务器

可参见这里。

小试一下

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "requiredBackgroundModes": ["audio"]
}

// index.js
Page({
  onReady:function(){
    const bgm = wx.getBackgroundAudioManager();
    bgm.title = "告白气球";
    bgm.epname = "周杰伦的床边故事";
    bgm.singer = "周杰伦";
    bgm.coverImgUrl = "http://localhost:8080/images/告白气球.jpg";
    bgm.src = "http://localhost:8080/songs/告白气球.mp3";
  }
})

onReady里，设置了bmg的src后，背景音乐就自动播放了。
启动音频服务器，并编译小程序，自动播放背景音乐，如下所示。

如果不希望音频自动播放，可以在onCanPlay里执行暂停操作。

Page({
  onReady:function(){
    const bgm = wx.getBackgroundAudioManager();
    bgm.title = "告白气球";
    bgm.epname = "周杰伦的床边故事";
    bgm.singer = "周杰伦";
    bgm.coverImgUrl = "http://localhost:8080/images/告白气球.jpg";
    bgm.src = "http://localhost:8080/songs/告白气球.mp3";
    bgm.onCanplay(() => {
      bgm.pause();
    })
  }
})

再试一下

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "requiredBackgroundModes": ["audio"]
}

<!--index.wxml-->
<view class="container {{isRunning?'running':'paused'}}" bindtap="changeState">
  <image class="turn-table" src="../../images/turn-table.png"></image>
  <image class="tone-arm" src="../../images/tone-arm.png"></image>
</view>

/**index.wxss**/
.container{
  position: fixed;
  right: 36rpx;
  top: 20rpx;
}
.container .turn-table{
  width: 80rpx;
  height: 80rpx;
  animation:spin 10s linear infinite;
}
@keyframes spin{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
.running .turn-table{
  animation-play-state: running;
}
.paused .turn-table{
  animation-play-state: paused;
}
.container .tone-arm{
  width: 80rpx;
  height: 200rpx;
}
.running .tone-arm{
  animation: swing-running 0.5s linear forwards;
}
@keyframes swing-running{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(10deg);
  }
}
.paused .tone-arm{
  animation: swing-paused 0.5s linear forwards;
}
@keyframes swing-paused{
  from{
    transform: rotate(10deg);
  }
  to{
    transform: rotate(0deg);
  }
}

// index.js
Page({
  data:{
    isRunning:false
  },
  bgm:null,
  onReady:function(){
    this.bgm = wx.getBackgroundAudioManager();
    this.bgm.title = "告白气球";
    this.bgm.epname = "周杰伦的床边故事";
    this.bgm.singer = "周杰伦";
    this.bgm.coverImgUrl = "http://localhost:8080/images/告白气球.jpg";
    this.bgm.src = "http://localhost:8080/songs/告白气球.mp3";
    this.bgm.onCanplay(() => {
      this.bgm.pause();
    })
  },
  changeState:function(){
    if(this.data.isRunning){
      this.bgm.pause();
    }else{
      this.bgm.play();
    }
    this.setData({
      isRunning:!this.data.isRunning
    })
  }
})

参考文章

requiredBackgroundModes