在这里插入图片描述

话不多说，遇到的坑解决办法如下：

解决暂停再播放不能从头播的问题。（准备好更新进度、获取单个课程播放进度的接口）

1.当音频暂停、进度条拖动（音频暂停状态）、快进快退（音频暂停状态）、页面卸载时调用更新接口；
2.再次播放时调用获取接口；
3.微信小程序的BackgroundAudioManager.currentTime并不能获取到上次暂停时的时间，这时候需要我们用seek()方法跳转到获取接口返回的时间

//更新音频、视频的观看时长
  updateViewTime: function () {
    let that = this;
    let openId = wx.getStorageSync('openid');
    let data = {
      id: that.data.course_id,
      viewing_time: that.data.offset,
      openid: openId
    };
    util.request('Product/viewRecord', data, "POST", function (res) {
      if (res.data.code == 200) {
  
      }
    });
  },

//获取当前音频/视频播放时长
  getMediaCurTime: function () {
    let that = this;
    let openId = wx.getStorageSync('openid');
    let data = {
      openid: openId,
      id: that.data.course_id
    }
    util.request('user/getCourseViewRecord', data, "GET", function (res) {
      if (res.data.code == 200) {
        that.setData({
          viewing_time: parseFloat(res.data.data.viewing_time)
        })
      }
    });
  },
  
//当前音频时间发生变化时
  currentTimeChange:function(){
    let self = this;
    bgMusic.onTimeUpdate(() => {
      let offset = bgMusic.currentTime;
      let currentTime = parseInt(offset);
      let duration = bgMusic.duration;
      let min = "0" + parseInt(currentTime / 60);
      let max = parseInt(bgMusic.duration);
      let sec = currentTime % 60;
      if (sec < 10) {
        sec = "0" + sec;
      };
      let starttime = min + ':' + sec;
      self.setData({
        offset: currentTime,
        starttime: starttime,
        max: max,
        is_updateTime: true,
      });
    });
  },

点击开始播放要做如下操作：

//开始按钮
  listenerButtonPlay: function () {
    let that = this;
    const bgMusic = wx.getBackgroundAudioManager(); //音乐播放实例
    //bug ios 播放时必须加title 不然会报错导致音乐不播放
    bgMusic.title = that.data.courseInfo.course_name;
    bgMusic.epname = that.data.courseInfo.course_name;
    bgMusic.src = that.data.src;
        
        //获取当前音频/视频播放时长 由于声明提前造成viewing_time不是我们想要的，而是上次点击存的(注意：这里也是个坑)
        that.getMediaCurTime();
        setTimeout(function(){
          let viewing_time = that.data.viewing_time;
          bgMusic.onTimeUpdate(() => {
          //判断当前时间是不是0，如果是0就不需要跳转直接更新进度
            if (viewing_time != 0) {
             //跳转到暂停时存储的时间
              bgMusic.seek(viewing_time);
              //更新进度
              that.currentTimeChange();
            } else {
            //更新进度
              that.currentTimeChange();
            }
          }); 
        },300)
        
        //开始播放
        bgMusic.play();
        that.setData({
          isOpen: true,
        });

    //播放结束
    bgMusic.onEnded(() => {
      that.setData({
        starttime: '00:00',
        isOpen: false,
        offset: 0
      })
      //播放自然结束时更新进度
      that.updateViewTime();
    })
  },

点击暂停操作如下：

//暂停
listenerButtonPause:function () {
  const bgMusic = wx.getBackgroundAudioManager(); //音乐播放实例
  let that = this
  bgMusic.pause();
  that.setData({
    isOpen: false
  });
  //更新进度
  that.updateViewTime();
},

进度条拖动时的操作:

// 音频进度条拖拽
  sliderChange:function(e) {
    let that = this;
    const bgMusic = wx.getBackgroundAudioManager(); //音乐播放实例
    let offset = parseInt(e.detail.value);
      if (that.data.isOpen){
        //播放状态
        bgMusic.play();
        //进度条拖动，音乐进度也要改变
        bgMusic.seek(offset);
        //更新进度
        that.updateViewTime();
      } else {
        //暂停状态
        if(offset){
          bgMusic.pause();
          that.setData({
            offset: offset
          })
          //更新进度
          that.updateViewTime();
        } else {
          util.showSuccess("请观看后操作");
        }
      }
  },

初始化数据如下：


data: {
  audioCover:true, //音频播放的遮罩
  course_id:'1',
  isOpen: false,//播放开关
  is_updateTime:false, //判断有没有观看
  starttime: '00:00', //正在播放时长
  src: "",  //音频链接
  offset:0, //当前播放时间
  viewing_time:0,//接口返回的课程播放到的时间
},

wxml

<!-- 音频start -->
  <view class="audioBox {{selected1||courseInfo.course_carrier == 2?'show':'hidden'}}" wx:if="{{courseInfo.course_carrier == 2 || courseInfo.course_carrier == 4}}">
    <!-- 音频图片和标题 -->
    <view class='top'>
      <image src='{{courseInfo.course_pictures}}'></image>
      <view class='top_title'>{{courseInfo.course_name}}</view>
      <text class='price'>￥{{courseInfo.course_price}}</text>
    </view>
    <view class='bottom'>
      <!-- 进度条 -->
      <view class='progress'>
        <slider class='slider'
              bindchange="sliderChange" 
              activeColor='red' 
              block-size="12" 
              max="{{max}}"
              value='{{offset}}' />
        <view class='time'>
          <text>{{starttime}}</text>
          <text>{{courseInfo.duration}}</text>
        </view>
      </view>
      <!-- 音频控制 -->
      <view class='control'>
        <icon class='leftBtn iconfont iconai10' bindtap='prev'></icon>
        <view class='stateBtn' wx:if="{{!isOpen}}" bindtap="listenerButtonPlay">
          <view class='audioCover' wx:if="{{audioCover}}"></view>
          <icon class='startBtn iconfont iconbofang2'></icon>
        </view>
        <view class='stateBtn' wx:if="{{isOpen}}" bindtap="listenerButtonPause">
          <icon class='iconfont iconstop'></icon>
        </view>
        <icon class='rightBtn iconfont iconai09' bindtap='next'></icon>
      </view>
    </view>
  </view>
  <!-- 音频end -->

wxss

/* 音频start */
.audioBox{}
.audioBox>.top{
  text-align: center;
}
.audioBox>.top>image{
  width: 220rpx;
  height: 297rpx;
  border-radius: 8rpx;
  box-shadow: 2rpx 2rpx 4rpx 2rpx #D4D4D4;
}
.audioBox>.top>.top_title{
  font-size: 32rpx;
  font-weight: bold;
  margin: 36rpx 0 12rpx;
}
.audioBox>.top>.price{
  font-size: 26rpx;
  color: #a0a0a0;
}
.progress{
  margin-top: 53rpx;
}
.progress>.time {
  display: flex;
  justify-content: space-between;
  margin: 0 20rpx;
}
.progress>.time>text{
  font-size: 26rpx;
  color: #a0a0a0;
}
.control{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20rpx 0 56rpx;
}
.control>icon{
  font-size: 53rpx;
  color: #ff3f61;
}
.control>.stateBtn {
  position: relative;
  width: 94rpx;
  height: 94rpx;
  border-radius: 50%;
  background-color: #ff3f61;
  text-align: center;
  margin: 0 60rpx;
}
.control>.stateBtn>icon{
  line-height: 93rpx;
  font-size: 43rpx;
  color: white;
}
.audioBox>.bottom {
  
}
.audioCover {
  position: absolute;
  width: 94rpx;
  height: 94rpx;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 9998;
}
/* 音频end */

到这里差不多了，我的还有个快进快退14秒功能，也介绍下吧：

//后退14秒
  prev:function(){
    let that = this;
    const bgMusic = wx.getBackgroundAudioManager(); //音乐播放实例
    
      if (that.data.isOpen) {
        //播放状态
        bgMusic.seek(bgMusic.currentTime - 14);
        that.currentTimeChange();
        that.updateViewTime();
      } else {
        //暂停状态
        if (that.data.offset) {
          bgMusic.seek(bgMusic.currentTime - 14);
          that.setData({
            offset: bgMusic.currentTime - 14
          });
          let currentTime = parseInt(bgMusic.currentTime - 14);
          let min = "0" + parseInt(currentTime / 60);
          let sec = currentTime % 60;
          if (sec < 10) {
            sec = "0" + sec;
          };
          let starttime = min + ':' + sec;
          that.setData({
            starttime: starttime
          })
          that.updateViewTime();
          that.currentTimeChange();
        } else {
          util.showSuccess("请观看后操作");
        }
      }
  
  },
  //前进14秒
  next:function(){
    let that = this;
    const bgMusic = wx.getBackgroundAudioManager(); //音乐播放实例
      if(that.data.isOpen){
        //播放状态
        bgMusic.seek(bgMusic.currentTime + 14);
        that.updateViewTime();
      } else {
        //暂停状态
        if(that.data.offset){
          bgMusic.seek(bgMusic.currentTime + 14);
          that.setData({
            offset: bgMusic.currentTime + 14
          });
          let currentTime = parseInt(bgMusic.currentTime + 14);
          let min = "0" + parseInt(currentTime / 60);
          let sec = currentTime % 60;
          if (sec < 10) {
            sec = "0" + sec;
          };
          let starttime = min + ':' + sec;
          that.setData({
            starttime: starttime
          })
          that.updateViewTime();
        } else {
          util.showSuccess("请观看后操作");
        }
      }
  },
# 微信小程序
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

2024华为开发者盛典，海外开发者代表团走进华为

avatar 华为开发者空间
cover

华为“行业AI应用创新孵化营”走进中国医科大学，共探人才培养新模式

avatar 华为开发者空间
cover

拦截烂SQL，解读GaussDB(DWS)查询过滤器过滤规则原理

avatar 华为开发者空间