微信小程序学习笔记（四）音乐播放器（底部播放组件）

底部的播放组件，主要有播放控制（上一曲、播放/暂停、下一曲）、播放进度条组成。而这些组件的内容是根据当前播放的歌曲而改变的，因此需要进行动态的绑定。另外，播放与暂停按钮任意时刻只能显示其中一个，其是否显示取决于当前正在播放歌曲的状态，如果暂停，则显示播放，否则显示暂停。所以首先在在musicdemo.js的data中，添加正在播放歌曲的相关数据。

一、musicdemo.js

data: {
    /**当前歌曲播放状态，true正在播放,false暂停 */
    isPlay:true,
    /**当前播放的位置（时间） */
    currentTime: 1000,
    /**当前播放歌曲的总时间 */
    totalTime: 6800, 
    /**正播放歌曲信息 */
    currentPlayMusic: {
      musicImage:"/img/list_1.jpg",
      musicName:"驿动的心",
      singerName:"姜育恒",
      musicSrc:"/music/驿动的心.mp3"
    },
    /**页面Tab标签数据 */
    tab:0     
  },

二、musicdemo.wxml的设计

<!--页面底部播放组件-->
  <view class="footer">
    <!--播放控制-->
    <view class="current-music-controls">
      <image src="/img/myUp.png" />
      <image src="/img/icon-play.png" hidden="{{isPlay}}" />
      <image src="/img/icon-pause.png" hidden="{{!isPlay}}" />
      <image src="/img/myNext.png" />
    </view>
    <!--播放进度条-->
    <view class="current-music-playback-progress">
      <text>{{currentTime}}</text>
      <slider block-size="12" block-color="red"></slider>
      <text>{{totalTime}}</text>
    </view>
  </view>
  <!--页面底部播放组件结束-->

三、musicdemo.wxss样式的设置

/*==============底部样式设置====================*/
.footer{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 12vh;
  background-color: yellowgreen;
}
.current-music-controls{
  flex: 3;
  text-align: center;
}
.footer>.current-music-controls>image{
  margin: 0 1px;
  width: 65rpx;
  height: 65rpx;
}
.current-music-playback-progress{
  flex: 7;  
}
.footer>.current-music-playback-progress>slider{
  display: inline-block;
  width: 35vw;
}

最终效果如下所示

四、播放音乐

音乐的播放使用InnerAudioContext，它可通过wx.createInnerAudioContext接口获取实例。它的常用属性有

string src：音频资源的地址，用于直接播放

boolean autoplay：是否自动播放，默认为false

number duration：当前音频的长度（单位s）。只有在当前有合法的src时返回（只读）

number currentTime：当前音频的播放位置（单位s）。只有在当前有合法的src时返回，时间保留小数点后6位（只读）

常用方法：

InnerAudioContext.play()：播放

InnerAudioContext.pause()：暂停

InnerAudioContext.seek(number position)：路转到指定位置

InnerAudioContext.onEnded(function callback)：监听音频自然播放至结束的事件

InnerAudioContext.onTimeUpdate(function callback)：监听音频播放进度更新事件。

以上的属性和方法是本程序用到的，其它的属性和方法，请参阅官方文档。

1.创建InnerAudioContext实例

首先在data中创建musicCtx。然后在onLoad函数中创建InnerAudioContext实例，

data: {
    /**InnerAudioContext实例 */
    musicCtx:"",



/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.data.musicCtx = wx.createInnerAudioContext();//创建InnerAudioContext实例
    this.data.musicCtx.autoplay=true;//自动播放
    this.data.musicCtx.src=this.data.currentPlayMusic.musicSrc;//设置播放音乐
  },

此时，即可以实现音乐的播放。

2.音乐的暂停与播放

当程序运行时，播放默认的歌曲，即处于播放状态。接下来，实现音乐播放的控制功能。首先要为播放与暂停按钮绑定事件，然后在js文件中，进行事件的处理。

musicdemo.wxml代码

<image src="/img/icon-play.png" hidden="{{isPlay}}" bindtap="playMusic" />
<image src="/img/icon-pause.png" hidden="{{!isPlay}}" bindtap="pauseMusic" />

musicdemo.js代码

/**音乐播放控制函数 */
  musicPlay:function(){
    this.data.musicCtx.play();
    this.setData({
      isPlay:true
    })
  },
  musicPause:function(){  
    this.data.musicCtx.pause();
    this.setData({
      isPlay:false
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */

3.显示播放进度

播放进度，需要取得当前音乐的播放位置及音乐的总长度，然后对时间进行格式化进行显示。musicDemo.wxml代码修改如下：

<!--播放进度条-->
    <view class="current-music-playback-progress">
      <text>{{showMusicPlayTime}}</text>
      <slider value="{{currentTime}}" block-size="12" block-color="red" min="0" max="{{totalTime}}"></slider>
      <text>{{showMusicTotalTime}}</text>
    </view>

musicDemo.js代码修改如下：

首先在page上面声明函数

/**格式化时间 */
function formatTime(time) {
  var f = parseInt(time / 60)
  var s = (time % 60).toFixed(0)
  return f + ":" + s
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    /**当前显示播放时间 */
    showMusicPlayTime:"",
    /**显示当前歌曲的总时间 */
    showMusicTotalTime:"",



/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.data.musicCtx = wx.createInnerAudioContext();//创建InnerAudioContext实例
    this.data.musicCtx.autoplay=true;//自动播放
    this.data.musicCtx.src=this.data.currentPlayMusic.musicSrc;//设置播放音乐
    
    this.data.musicCtx.onTimeUpdate(() => {//更新进度条
      this.setData({
        currentTime:this.data.musicCtx.currentTime,
        totalTime:this.data.musicCtx.duration,
        showMusicPlayTime: formatTime(this.data.musicCtx.currentTime),
        showMusicTotalTime: formatTime(this.data.musicCtx.duration)
      })
    })
  },

4.实现进度条选择播放

实现进度条选择播放，需要获取到用户在进度条上选择的时间点。然后调用InnerAudioContext的seek方法即可。

InnerAudioContext.seek(number position)：跳转到指定位置

参数：number position 跳转的时间，单位 s。精确到小数点后 3 位，即支持 ms 级别精确度

bindchange

eventhandle

否

完成一次拖动后触发的事件，event.detail = {value}

musicdemo.wxml代码如下：

<slider bindchange="seekPlay" value="{{currentTime}}" block-size="12" block-color="red" min="0" max="{{totalTime}}"></slider>

musicdemo.js代码如下：

/**进度条点击播放 */
  seekPlay:function(e){
    this.data.musicCtx.seek(e.detail.value);//跳转到相应位置播放
  },

至此，页面底部的播放组件已完成。

来源：oschina

链接：https://my.oschina.net/u/3537796/blog/3212370

标签

data