微信小程序支持背景音乐播放

在微信小程序里播放音频，我们有 wxParse（升级版）, 这个插件能够解析 HTML 里面的 audio 标签，在网页上能播放的音频，在小程序里就能播放。但是这个插件解决不了的问题是背景音乐的播放。为什么一定要背景音乐播放呢？因为大部分手机在屏幕静止操作半分钟左右都会息屏，而息屏了，所有应用都会退出。比如在晚上临睡前，我们希望听个故事啥的，手机屏幕一黑，故事就停了，这多别扭啊？所以，我们需要背景音乐播放，在用户退出应用之后，音频仍然能够在手机中继续播放。

腾讯有 wx.playbackgroundaudio 这个组件支持背景音乐的播放，我们在开发小程序的时候，用上这个组件就好了。

先看一下效果：

要实现这个效果，我们需要后端传给前端两个参数，一个是唱片封面图片的网址，一个是音频文件的网址。我在这里仅就前端开发展开介绍。

我们为小程序注册一个页面 pages/audio/audio，包含以下四个文件：

audio.js

audio.wxml

audio.json

audio.wxss

下面是 audio.js 的关键部分：

var Api = require('../../utils/api.js');
var util = require('../../utils/util.js');
var WxParse = require('../../wxParse/wxParse.js');
var app = getApp()
 
Page({
  data: {
    isplay:0,
    animation: '',
    settimeobj:'',
    title:'',
    pic:'',
    audiosrc:'',
    playico: "../../images/play.png",
    pauseico: "../../images/pause.png",
    stopico: "../../images/stop.png",
    ctrimg: "../../images/play.png"
  },
 
  storyBindViewTap: function () {
    var id = e.currentTarget.dataset.id
    getApp().objid = id
    wx.navigateTo({
      url: '../audio/audio'
    })
  },
 
  //旋转动画
  playfun: function () {
      var self = this;
      var animationobj = wx.createAnimation({
      duration: 1400,
      timingFunction: 'linear',
      delay: 0,
      transformOrigin: '50% 50% 0',
    });
     
    var i = 0;
    self.settimeobj = setInterval(function () {
      animationobj.rotate(180 * (++i)).step()
      self.setData({
        animation: animationobj.export()
      })
    }.bind(self), 750)
  },
 
  //暂停旋转
  pausefun:function(){
      var self = this;
      var animationobj = wx.createAnimation({
      duration: 1000,
      timingFunction: 'step-start',
      delay: 0,
      transformOrigin: '50% 50% 0',
    })
    animationobj.rotate(0).step()
    self.setData({
      animation: animationobj.export()
    })
    clearInterval(self.settimeobj);
  },
 
  //控制操作图标
  ctr_audio: function (event){
    var self = this;
    if (self.data.isplay == 0){
      self.playfun()
      self.setData({ ctrimg: self.data.pauseico,isplay:1})
      self.audioPlay()
    }else{
      self.pausefun()
      self.setData({ ctrimg: self.data.playico, isplay: 0 })
      self.audioPause()
    }
  },
 
  //播放
  audioPlay: function () {
    var self = this;
    wx.playBackgroundAudio({
      dataUrl: self.data.audiosrc
    })
 
  },
 
  //暂停
  audioPause: function () {
    wx.pauseBackgroundAudio()
  },
 
  //停止
  audioStop: function () {
    wx.stopBackgroundAudio()
  },
 
 
  //启动页面
  onLoad: function (options) {
    this.fetchDetailData(options.id);
    var self = this;
 
    /**
     * 监听音乐停止
     */
    wx.onBackgroundAudioStop(function() {
      self.stopfun()
      self.setData({ ctrimg: self.data.stopico, isplay: 0 })
    });
 
  },
 
  getPlayStatus:function(){
    var self = this;
    wx.getBackgroundAudioPlayerState({
      success: function (res) {
        var status = res.status
        if (status == 1 && self.data.audiosrc == res.dataUrl) {
          self.playfun()
          self.setData({ ctrimg: self.data.stopico, isplay: 1 })
        } else if (status == 2) {
          self.stopfun()
          self.setData({ ctrimg: self.data.playico, isplay: 0 })
        }
      }
    })
  },
 
    //获取文章内容
  fetchDetailData: function (id) {
    var self = this;
    wx.request({
      url: 'xxxxxx', //后端网址
      success: function (response) {
                console.log(response.data);
        self.setData({
          detail: response.data,
          postID: id,
          audioposter: response.data.audioposter, //后端json文件中给出的唱片封面网址
      audiosrc: response.data.audiosrc, //后端json文件中给出的音频网址
          display: 'block'
        });
        wx.setNavigationBarTitle({
          title: response.data.title.rendered,
          success: function (res) {
            // success
          }
        });
      }
    });
  }
})

而 audio.wxml 中需要在 container 里面加上这一段：

<view class="circle" id="rotate" animation="{{animation}}" mode="scaleToFill" style="background:#ffffff url('{{audioposter}}') no-repeat; ">
    <view class="circle_smart"></view>
</view>
<view class="ctr" bindtap="ctr_audio">
    <image src="{{ctrimg}}" class="ctrimg"></image>
</view>

最后，将唱片的样式写入 audio.wxss：

/*******音乐播放器开始*********/
.circle{
  width: 300px;      
  height: 300px;      
  background-size:300px 300px;   
  border-radius: 50%;      
  -moz-border-radius: 50%;      
  -webkit-border-radius: 50%;
  margin:0 auto;
  line-height: 300px;
  vertical-align: middle;
  border: 1px dashed #f2f2f2;
  position:relative;
 
}
 
.circle_smart{
  position:absolute;
  width:30px;
  height:30px;
  background:#ffffff;
  background-size:30px 30px;
  border-radius:50%;
  -webkit-border-radius:50%;
  border:25px solid #f2f2f2;
  margin:auto;
  top:0;
  left:0;
  bottom:0;
  right:0;
 
}
 
.ctr{margin-top:15px;text-align: center;}
.ctrimg{width:40px;height:40px;}

这样，小程序就能够顺利地播放背景音乐了。现在，去做个音频方面的小程序试试吧，不论是情感类还是教育类，人气都很旺的哦！

作者：三藏 来源：红人网络