小程序播放音频问题
需求：音频第一次听，不能对音频有任何操作，比如暂停，快进，后退等。此外必须息屏继续播放，点Home键也继续播放等
之前使用音频的API，该API在苹果手机上加载音频文件过慢，起码3,4秒。此方案不行。后来改用背景音频API：
代码如下：
var WxParse = require('../wxParse/wxParse.js');
const api = require('../../config/api.js');
const util = require('../../utils/util.js');
const myaudio = wx.getBackgroundAudioManager();
//获取应用实例
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
boxHeight: 0,
showModalStatus: false,
animationData: '',
isplay: false,
user_id:0,
slider_value: 0,
audio_length: 0,
now_time: '00:00',
alltime: '00:00',
is_heard: false,
is_load: false,
paperdata: [],
testpaper_id:0,
isScreen:false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let user_info = wx.getStorageSync('userInfo');
this.data.user_id = user_info.id;
this.data.testpaper_id = options.resource_id;
myaudio.seek(0);//设置音频初始位置为0
this.getpaperdata();
this.setContentHeight();
this.audioListen();
},
onUnload:function(){
myaudio.pause();
},
// onShow:function(){
// if(this.data.isScreen){
// this.play();
// this.setData({ isScreen: false });
// }
// },
// onHide: function () {
// if (this.data.isplay) {
// this.pause();
// this.setData({ isScreen: true });
// }
// },
showModal: function () {
// 显示遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "ease-in-out",
delay: 0
})
this.animation = animation
animation.translateY(500).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 0)
},
//设置听力材料滚动高度
setContentHeight: function () {
var that = this;
wx.getSystemInfo({
success: function (res) {
console.log(res);
let h = 750 * (res.windowHeight - 175) / res.windowWidth
that.setData({
'boxHeight': h
});
}
})
},
//关闭遮罩层
clockDetail: function () {
this.setData({
showModalStatus: false,
})
},
//获取听力详情
getpaperdata: function () {
let that = this;
util.myrequest(api.Paperdetail, { testpaper_id: that.data.testpaper_id }, 'get').then(function (res) {
let papers = res.data;
// console.log(res);
if(res.code == 200){
// 重置列表为空
that.setData({
paperdata: papers,
// audio_length: data.audio_length//设置音频总时长
});
if (papers.audiopath != '') {
myaudio.title = papers.name;
myaudio.epname = papers.name;
myaudio.singer = '中考听力'
myaudio.src = papers.audiopath;
myaudio.coverImgUrl = papers.book_cover;
that.play();
that.setData({
audio_length: papers.playtime_seconds,
alltime: that.s_to_ms(papers.playtime_seconds),
is_heard: papers.is_heard,
});
}
WxParse.wxParse('article', 'html', papers.content, that, 0);
}
});
},
//播放
play: function () {
myaudio.play();
// console.log((myaudio.duration));
this.setData({ isplay: true });
},
// 停止
pause: function () {
myaudio.pause();
this.setData({ isplay: false });
},
//监听slider
listenerSlider: function (e) {
//获取滑动后的值
console.log(e.detail.value);
var per = e.detail.value / 100;
var long = per * this.data.audio_length;
this.setData({
now_time: this.s_to_ms(long)
})
myaudio.seek(long);//通过滑块控制音频进度
},
//监控音频进度
audioListen: function () {
var that = this;
myaudio.onPlay(() => {
// console.log('开始播放')
})
//必须先执行onPlay方法，才能继续执行onTimeUpdate方法
myaudio.onTimeUpdate(function (res) {
if (Math.ceil(myaudio.currentTime) + 1 >= Math.ceil(myaudio.duration) && Math.ceil(myaudio.duration)>0) {
that.setData({
slider_value: 0,
now_time: '00:00',
isplay: false,
});
if (that.data.is_heard == false && that.data.is_load == false) {
that.setData({
is_load: true
})
that.setpaperread();
}
} else {
var per = (myaudio.currentTime / myaudio.duration) * 100;
that.setData({
slider_value: per,//设置slider滑块所在位置
now_time: that.s_to_ms(myaudio.currentTime)//获得的值是秒，需要转换成分钟
})
}
})
},
//设置听完
setpaperread: function () {
let that = this;
// console.log('开始设置');
util.myrequest(api.Paperread, { testpaper_id: that.data.testpaper_id }, 'get').then(function (res) {
that.setData({ is_load: true });
if (res.code == 200) {
that.setData({ is_heard: true })
}
});
},
//点击遮罩层
clickRadioShade: function () {
util.showErrorToast('第一次需要完整听完才可暂停或调整播放位置', 3000);
},
//中考听力模拟
testsTap: function () {
myaudio.pause();
this.setData({ isplay: false });
let that = this;
util.myrequest(api.CheckBuy, { tests_id: that.data.paperdata.tests_id }, 'GET', 'application/json').then(res => {
if (res.had_buy === 0) {
wx.navigateTo({
url: '../detail/detail?tests_id=' + that.data.paperdata.tests_id + '&user_id=' + that.data.user_id
})
} else if (res.is_buy === 0) {
wx.showModal({
title: '温馨提示',
content: '该试卷未购买',
confirmText: '购买',
cancelText: '取消',
success(res) {
if (res.confirm) {
//console.log('用户点击确定')
return that.buyOrder(that.data.paperdata.tests_id);
}
}
})
} else {
wx.navigateTo({
url: '../detail/detail?tests_id=' + that.data.paperdata.tests_id + '&user_id=' + this.data.user_id
})
}
}).then(res => {
//console.log(res)
})
},
/**
* 将秒转换为 分:秒
* s int 秒数
*/
s_to_ms: function (s) {
s = Math.ceil(s);
var h = Math.floor(s / 60);
s = s % 60;
h += '';
s += '';
h = (h.length == 1) ? '0' + h : h;
s = (s.length == 1) ? '0' + s : s;
return h + ':' + s;
}
})
但是腾讯很坑爹啊，调用背景音频会出现微信的播放器；该播放器可以对视频任意操作，快进，快退等。看来微信的api也不是很满足需求啊。请有解决方法的大牛请赐教啊？
我这边的解决方案是把改页面改成HTML5进行处理解决。
小程序代码
<web-view src="https://devzktl.dledc.com/portal/index/doquest?tests_id={{tests_id}}&user_id={{user_id}}&token={{token}}#{{hash}}"></web-view>
注:hashchange事件
①当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号）
②hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性：
window.addEventListener('hashchange',function(e) {
......
},false);
息屏或者home触发事件。达到HTML与小程序通讯功能呢。
