需求：音頻第一次聽，不能對音頻有任何操作，比如暫停，快進，后退等。此外必須息屏繼續播放，點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與小程序通訊功能呢。