微信小程序使用wx.getBackgroundAudioManager()写音频播放,ios和安卓真机测试,暂停再播放结果从头播的bug【已解决】
话不多说,遇到的坑解决办法如下:解决暂停再播放不能从头播的问题。(准备好更新进度、获取单个课程播放进度的接口)1.当音频暂停、进度条拖动(音频暂停状态)、快进快退(音频暂停状态)、页面卸载时调用更新接口;2.再次播放时调用获取接口;3.微信小程序的BackgroundAudioManager.currentTime并不能获取到上次暂停时的时间,这时候需要我们用seek()方法跳转到获取接...
·
话不多说,遇到的坑解决办法如下:
解决暂停再播放不能从头播的问题。(准备好更新进度、获取单个课程播放进度的接口)
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("请观看后操作");
}
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)