音乐播放控制API

本文编辑：  MINA搬运工浏览 10156 版权所有，严禁转载

音乐播放状态API

音乐播放控制API

监听播放状态的事件

API 的说明部分来自官方文档，笔者补充的内容，会以 tips 形式给出。比如：

tips : 音乐播放控制API的使用，几个小场景：（1）定制一个自己的音乐播放小程序（流量问题，可以使用缓存来解决）；（2）内容资讯类小程序的补充背景音乐；（3）睡前辅助小程序，天然白嘈音（首日上线即获70w+用户的小睡眠小程序）

仅对示例Demo感兴趣的，请直接拉到最后。

音乐播放状态

wx.getBackgroundAudioPlayerState(OBJECT)

获取音乐播放状态。

OBJECT参数说明：

success返回参数说明：

示例代码：

wx.getBackgroundAudioPlayerState({
    success: function(res) {
        var status = res.status
        var dataUrl = res.dataUrl
        var currentPosition = res.currentPosition
        var duration = res.duration
        var downloadPercent = res.downloadPercent
    }
})

音乐播放控制

wx.playBackgroundAudio(OBJECT)

播放音乐，同时只能有一首音乐正在播放。

OBJECT参数说明

示例代码：

wx.playBackgroundAudio({
    dataUrl: '',
    title: '',
    coverImgUrl: ''
})

wx.pauseBackgroundAudio()

暂停播放音乐。

示例代码：wx.pauseBackgroundAudio()

wx.seekBackgroundAudio(OBJECT)

控制音乐播放进度。

OBJECT参数说明：

示例代码：

wx.seekBackgroundAudio({
    position: 30
})

wx.stopBackgroundAudio()

停止播放音乐。

示例代码：wx.stopBackgroundAudio()

监听播放状态事件

wx.onBackgroundAudioPlay(CALLBACK)

监听音乐播放。

tips：一般情况下，被 wx.playBackgroundAudio() 方法触发。

wx.onBackgroundAudioPause(CALLBACK)

监听音乐暂停。

tips：一般情况下，被 wx.pauseBackgroundAudio() 方法触发。

wx.onBackgroundAudioStop(CALLBACK)

监听音乐停止。

tips：一般情况下，被 音乐自然播放停止 或 wx.seekBackgroundAudio() 方法导致 播放位置等于音乐总时长时 触发。

tips：特别地，开发工具最新版本0.12.130400中 wx.stopBackgroundAudio() 方法不能触发该事件（请读者一起验证一下）。这就是为什么，笔者在 onStopTap 仍然编码 改变音乐播放和coverImg的状态的原因。

相关 bug 说明

bug1: iOS 6.3.30 wx.seekBackgroundAudio 会有短暂延迟。（请更新至最新版本的 6.5.3 ）

bug2: wx.pauseBackgroundAudio 在开发工具中，表现为 wx.stopBackgroundAudio 的行为，在真机测试中，表现正常。（最新版本0.12.130400 开发工具中已经修复 ）

综合案例

音乐控制的内容，为每个API写示例的话，那就不好玩了。这部分就直接一个利用 8 个API设计的完整 Demo，先来效果吧（笔者自夸时间：音乐控制，相当优雅精美哦，注释中有大玄机）！

注意1：gif 展示效果，没有声音，其实快进和快退是有效果的呢！
注意2：图片素材，请点击百度公有盘或者是百度私有盘 密码：tatw

wxml(骨架)

<view class="container">
  <image class="bgaudio" src="{{changedImg?music.coverImg:'/images/bgaudio.png'}}" />
  <view class="control-view">
    <!-- 使用 data-how 定义一个0、1表示 快退或快进10秒 -->
    <image src="/images/front10.png" bindtap="onPositionTap" data-how="0"/>
    <image src="/images/{{isPlaying?'play':'pause'}}.png" bindtap="onAudioTap" />
    <image src="/images/stop.png" bindtap="onStopTap" />
    <!-- 使用 data-how 定义一个0、1表示 快退或快进10秒 -->
    <image src="/images/next10.png" bindtap="onPositionTap" data-how="1"/>
  </view>
</view>

wxss(衣服)

.bgaudio{
  height: 350rpx;
  width: 350rpx;
  margin-bottom: 100rpx;
}

.control-view image{
  height: 64rpx;
  width: 64rpx;
  margin: 30rpx;
}

js(小动作)

Page({
  data: {
    // 记录播放状态
    isPlaying: false,
    // 记录 coverImg ，仅当音乐初始时和播放停止时，使用默认的图片。播放中和暂停时，都是用当前音乐的的 coverImg
    changedImg: false,
    // 音乐内容
    music: {
      "url": "http://ws.stream.qqmusic.qq.com/C100002I8eGJ28BI17.m4a?fromtag=38",
      "title": "谭咏麟 - 朋友",
      "coverImg": "http://y.gtimg.cn/music/photo_new/T002R150x150M000004eGsCN3SUheO.jpg?max_age=2592000"
    },
  },
  onLoad: function () {
    // 页面加载时，注册监听事件
    this.onAudioState();
  },
  // 点击播放或者是暂停按钮时触发
  onAudioTap: function (event) {
    if (this.data.isPlaying) {
      // 正常播放的话，就暂停。并修改播放的状态
      wx.pauseBackgroundAudio();
    } else {
      // 暂停的话，就开始播放。并修改播放的状态
      let music = this.data.music;
      wx.playBackgroundAudio({
        dataUrl: music.url,
        title: music.title,
        coverImgUrl: music.coverImg
      })
    }
  },
  // 点击停止音乐的播放
  onStopTap: function () {
    let that = this;
    wx.stopBackgroundAudio({
      success: function () {
        // 改变 coverImg 和 播放状态
        that.setData({ isPlaying: false, changedImg: false });
      }
    })
  },
  // 点击 快进10秒或者是快退10秒时，触发
  onPositionTap: function (event) {
    let how = event.target.dataset.how;
    // 获取音乐的播放状态
    wx.getBackgroundAudioPlayerState({
      success: function (res) {
        // 仅仅在音乐播放中，快进和快退才生效
        // 音乐的播放状态，1 表示播放中
        let status = res.status;
        if (status === 1) {
          // 音乐的总时长
          let duration = res.duration;
          // 音乐播放的当前位置
          let currentPosition = res.currentPosition;

          if (how === "0") {
            //注意: 快退时，当前播放位置快退 10 秒小于 0 的话，直接设置 position 为 1；否则的话直接减去 10 秒秒
            // 快退到达的位置
            let position = currentPosition - 10;
            if (position < 0) {
              position = 1;
            }
            // 执行快退
            wx.seekBackgroundAudio({
              position: position
            });
            // 给出一个友情提示，实际引用中，请删除！！！
            wx.showToast({ title: "快退10s", duration: 500 });
          }

          if (how === "1") {
            //注意: 快进时，当前播放位置快进 10 秒后大于总时长的话，直接设置 position为 总时长减 1 
            // 快进到达的位置
            let position = currentPosition + 10;
            if (position > duration) {
              position = duration - 1;
            }
            // 执行快进
            wx.seekBackgroundAudio({
              position: position
            });
          // 给出一个友情提示，实际引用中，请删除！！！
            wx.showToast({ title: "快进10s", duration: 500 });
          }
        } else {
          // 给出一个友情提示，实际引用中，请删除！！！
          wx.showToast({ title: "音乐未播放", duration: 800 });
        }
      }
    })

  },
  onAudioState: function () {
    let that = this;
    wx.onBackgroundAudioPlay(function () {
      // 当 wx.playBackgroundAudio() 执行时触发
      // 改变 coverImg 和 播放状态
      that.setData({ isPlaying: true, changedImg: true });
      console.log("on play");
    });

    wx.onBackgroundAudioPause(function () {
      // 当 wx.pauseBackgroundAudio() 执行时触发
      // 仅改变 播放状态
      that.setData({ isPlaying: false });
      console.log("on pause");
    });

    wx.onBackgroundAudioStop(function () {
      // 当 音乐自行播放结束时触发
      // 改变 coverImg 和 播放状态
      that.setData({ isPlaying: false, changedImg: false });
      console.log("on stop");
    });
  }
})

如果对于 单个API示例有偏执的同学，请按照下面的说明拆分代码：

• onAudioState 方法中是监听播放状态事件的小Demo
• onAudioTap 方法中是音乐播放控制的play和pause两个API的小Demo
• onStopTap 方法中是音乐播放控制的stop单个API的小Demo
• onPositionTap 方法中是音乐播放控制的stop和音乐播放状态的seek两个API的小Demo

延伸阅读内容

从无到有系列内容

• 从0到1：初学者入门Demo欢迎页
• 从1到2：初学者入门Demo内容列表页
• 从2到3：初学者Demo内容详情页【关于音乐控制的实际使用】