收藏
回答

ios真机测背景音频播放,暂停再播发从头开始播什么原因?

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug 背景音频 客户端 7.0.3 最新

- 复现路径:第1步,第一次点击播放正常播放;第二步,暂停;第三次,第二次点击播放,从头开始播放;

/* 音频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;
}
.control>.speed {
  position: absolute;
  top: 26rpx;
  right: 62rpx;
  font-size: 28rpx;
  color: #a0a0a0;
  text-align: center;
}
.control>.speed>view {
  display: block;
  font-size: 23rpx;
  color: #a0a0a0;
  margin-top: 10rpx;
}
.audioBox>.bottom {
   
}
.audioCover {
  position: absolute;
  width: 94rpx;
  height: 94rpx;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 9998;
}
/* 音频end */
<!-- 音频start -->
 <view class='audioBox' wx:elif="{{courseInfo.course_carrier == 2}}">
   <!-- 音频图片和标题 -->
   <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 class='speed'  bindtap="audioPlaybackRateSpeedUp">
         1.5X
         <view>倍速播放</view>
       </view>
     </view>
   </view>
 </view>
 <!-- 音频end -->

小程序开发工具上测没问题,ios真机测试时暂停再播放是从头播。

//播放按钮
 listenerButtonPlay: function () {
   let that = this;
   //bug ios 播放时必须加title 不然会报错导致音乐不播放
   bgMusic.title = that.data.courseInfo.course_name;
   bgMusic.epname = that.data.courseInfo.course_name;
   bgMusic.src = that.data.src;
    
   //播放进度发生变化时
   bgMusic.onTimeUpdate(() => {
     //bgMusic.duration总时长  bgMusic.currentTime当前进度
     let duration = bgMusic.duration;
     let offset = bgMusic.currentTime;
     let currentTime = parseInt(bgMusic.currentTime);
     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;
     that.setData({
       offset: currentTime,
       starttime: starttime,
       max: max,
     });
   });
 
   //开始播放
   bgMusic.play();
   that.setData({
     isOpen: true,
   });
 
   //播放结束
   bgMusic.onEnded(() => {
     that.setData({
       starttime: '00:00',
       isOpen: false,
       offset: 0
     })
     that.updateViewTime();
     console.log("音乐播放结束");
   })
 },
//暂停
  listenerButtonPause:function () {
    let that = this
    bgMusic.pause();
    that.setData({
      isOpen: false
    });
    that.updateViewTime();
  },


最后一次编辑于  2019-03-15
回答关注问题邀请回答
收藏

1 个回答

  • 疯狂的小辣椒
    疯狂的小辣椒
    2019-03-15

    请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2019-03-15
    有用
    回复 15
    • Sun
      Sun
      2019-03-15

      机型:iphone6plus  微信版本:最新的

      2019-03-15
      回复
    • LiuTony
      LiuTony
      2019-03-15

      我这是安卓的同样问题

      2019-03-15
      回复
    • Sun
      Sun
      2019-03-16回复LiuTony

      你是写代码的托尼老师?

      2019-03-16
      回复
    • LiuTony
      LiuTony
      2019-03-18回复Sun

      假的假的

      2019-03-18
      回复
    • Sun
      Sun
      2019-03-19

      ???

      2019-03-19
      回复
    查看更多(10)
登录 后发表内容