微信小程序：音乐播放器带进度条

代码

JS

// pages/meddledetails/meddledetails.js
var config = require('../../config.js')
var util = require('../../utils/utils.js')
var WxParse = require('../../wxParse/wxParse.js');
var app = getApp()
const innerAudioContext = wx.createInnerAudioContext();
const bgMusic = wx.getBackgroundAudioManager()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [],
    id: '',
    state: '',
    isOpen: false, //播放开关
    starttime: '00:00', //正在播放时长
    duration: '00:00', //总时长
    showTime2: '00:00',
    offset:'',
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;

    //全局监听停止事件 监听浮窗关闭事件
    bgMusic.onStop(() => {
      that.setData({
        starttime: '00:00',
        isOpen: false,
        offset: 0
      })
    })
 //全局监听音乐播放暂停事件
    bgMusic.onPause(() => {
      that.setData({
        isOpen: false,
      })
    })

    that.setData({
      id: options.id,
      options: options,
    })
    //去调用接口
    that.loadTrade(options)
    // this.Initialization();
    // this.loadaudio();
  },
  /**
   * 调取接口 获取干预详情
   */
  loadTrade: function(options) {
    var that = this;
    var param = {
      openid: app.globalData.openid,
      token: app.globalData.token,
      id: that.data.id
    }
    // console.log(param)
    wx.showLoading({
      title: '加载中',
    })
    var url = config.meddle_detail;
    util.postrequest(url, param, function(res) {
      // console.log(res.data)
      wx.hideLoading()
      if (res.data.status == 1) {
        WxParse.wxParse('desc', 'html', res.data.info.desc, that, 5);
        var list = res.data.info;
         
        that.setData({
          list: list,
          state: list.is_collect,
          audiosrc: list.audio,
        });
      } else {
        wx.showToast({
          title: res.data.info,
          icon: 'none',
          duration: 2000,
        })
      }

    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    // this.onLoad(this.data.option)
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    // if (this.data.options){
    // this.onLoad(this.data.options)
    // }
 
  },

  /**
   * 点击播放
   */
  listenerButtonPlay: function () {
    var that = this
    if (that.data.offset) {
      bgMusic.play();
      bgMusic.seek(this.data.offset);
      that.setData({
        isOpen: true,
      })
      return false;
    }
    
    // setInterval(() => {
    //   wx.getBackgroundAudioPlayerState({
    //     success: (res) => {
    //       let status = res.status
    //       let duration = res.duration
    //       var duration1 = this.formatTime(duration);
    //       if (status === 1) {
    //         that.setData({
    //           // cpTime: cpTime,
    //           duration: duration1,
    //         })
    //       }
    //     }
    //   })
    // })
    //bug ios 播放时必须加title 不然会报错导致音乐不播放
    bgMusic.title = that.data.list.title
    bgMusic.epname = that.data.list.title
    bgMusic.src = that.data.audiosrc; //播放音乐的地址 网址
    bgMusic.onTimeUpdate(() => {
      //bgMusic.duration总时长  bgMusic.currentTime当前进度
      // console.log(bgMusic.currentTime)
      var duration = bgMusic.duration;
      var offset = bgMusic.currentTime;
      // console.log('播放' + offset)
      var currentTime = parseInt(bgMusic.currentTime);
      if (parseInt(currentTime / 60).toString().length <= 1) {
        var min = "0" + parseInt(currentTime / 60)
      }else{
        var min = parseInt(currentTime / 60);
      }
      // var min = "0" + parseInt(currentTime / 60);
      var max = parseInt(bgMusic.duration);
      var sec = currentTime % 60;
      if (sec < 10) {
        sec = "0" + sec;
      };
      var starttime = min + ':' + sec; /*  00:00  */
     
      that.setData({
        offset: currentTime,
        starttime: starttime,
        max: max,
      })
    })
    //播放结束
    bgMusic.onEnded(() => {
      that.setData({
        starttime: '00:00',
        isOpen: false,
        offset: 0
      })
      // console.log("音乐播放结束");
      return false;
    })
    bgMusic.play();
    bgMusic.onPlay(() => {
      // console.log('播')
      that.setData({
        isOpen: true,
      })
    })
    // that.setData({
    //   isOpen: true,
    // })
  },
  //暂停播放
  listenerButtonPause(e) {
    var that = this
    // console.log('暂停播放')
    bgMusic.pause()
    // that.setData({
    //   isOpen: false,
    // })
    bgMusic.onPause(() => {
      // console.log("结束");
      that.setData({
        isOpen: false,
      })
    })
    
    
    
  },
  //停止播放
  listenerButtonStop() {
    // console.log('停止播放')
    var that = this
    bgMusic.stop()
  },
  
  // 进度条拖拽
  sliderChange(e) {
    var that = this
    var offset = parseInt(e.detail.value);
    // console.log('进度条拖拽进度条拖拽进度条拖拽')
    // console.log(offset)
    bgMusic.play();
    bgMusic.seek(offset);
    that.setData({
      isOpen: true,
    })
  },

  
/**
 * 生命周期函数 监听页面卸载
 */
  onUnload: function() {
    // console.log('监听页面卸载')
    var that = this
    that.listenerButtonStop() //停止播放
    // console.log("离开")
  },
  /**
 * 生命周期函数 监听隐藏卸载
 */
  onHide: function() {

    // console.log('监听隐藏卸载')
    // //暂停播放
    // innerAudioContext.pause();
    // // //
    // this.setData({
    //   isPlayAudio: false,
    // });
  },
  formatTime: (time) => {
    time = Math.floor(time);
    var m = Math.floor(time / 60).toString();
    m = m.length < 2 ? '0' + m : m;
    var s = (time - parseInt(m) * 60).toString();
    s = s.length < 2 ? '0' + s : s;
    return m + ':' + s;
  },
 


})

WXML

<view class='audioPlayer'>
    <view class='player'>
      <image src='{{list.image}}' class=''></image>
      <view class='audioControls'>
        <view class='flex'>
          <view class='bottom'>
            <!-- 按钮 -->
            <view wx:if="{{isOpen}}">
                <image src='/images/play_end.png' bindtap="listenerButtonPause"/>
            </view>
            <view wx:else>
                <image src='/images/play_start.png' bindtap="listenerButtonPlay" />
            </view>
          </view>
          <view class='slider'>
            <slider bindchanging="sliderChange" block-size="12px" step="2" value="{{offset}}" max="{{max}}" selected-color="#4c9dee" />
          </view>
          <view class='time'>
            {{starttime}}
            <!-- /{{showTime2}}  wx:if="{{isOpen}}" -->
          </view>
        </view>
      </view>
    </view>
  </view>

WXSS

.audioPlayer{
  width: 100%;
  height: 400rpx;
  margin-bottom: 30rpx;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
}
.player{
  width: 100%;
  height: 100%;
  position: relative;
}
.audioBack{
  width: 100%;
  height: 100%;
}
.audioControls{
  width: 100%;
  height: 80rpx;
  background:#fff;
  opacity: .8;
  position: absolute;
  bottom: 0;
  color: white;
  font-size: 6pt;
  line-height: 80rpx;
  text-align: center;
}
.audioControls .bottom{
  width: 60rpx;
  height: 100%;
}
.audioControls .bottom image{
  margin-top: 30%;
  margin-left: 30%;
  width: 50rpx;
  height: 50rpx;
}
.audioControls .slider{
  width: 520rpx;
  height: 100%;
}
/* .slider{

} */
.slider slider{
  width: 100%;
  margin-left: 10%;
  margin-right: 0;
}
.audioControls .time{
  width: 30%;
  height: 100%;
  margin-right: -19px;

}