问题描述:
音乐播放过程中,切换到应用其他页面时,用后台的状态栏切换音乐时音乐会暂停。
问题分析:
华为audio接口只能在页面中使用,当audio所在的页面退出后,页面销毁,绑定的上下文对象也随之不存在。 此时,在通知栏上一首、下一首切换歌曲时,后台播放服务首先暂停当前歌曲,状态重置,但是audio接口的绑定事件找不到上下文对象,无法触发previous和next事件,导致上述现象。
解决方案:
在应用首页监听audio事件,而不仅仅是在播放页面添加,当用户离开播放页面时,依然可以监听到audio的每个事件,从而去控制播放逻辑。
注意:由于华为快应用引擎不支持在app.ux里调用audio接口,所以当用户退出了整个应用,虽然后台依然在播放,但是快应用是不能收到audio的事件回调的。
实现代码:
以下示例demo中有两个页面:首页Main和音频Audio。为了避免重复代码,可维护性,将audio的相关代码独立出来作为一个公共的js,方便每个页面调用。
1)公共utils.js:
import audio from '@system.audio';
export default{
listenAudio() {
var that=this;
console.info("util.js listenAudio ");
audio.onplay = function () {
console.log('audio onplay')
}
audio.onpause = function () {
console.log('audio onpause')
}
audio.onended = function () {
console.log('audio onended')
}
audio.ondurationchange = function () {
console.log('util.js ondurationchange')
var total = audio.duration
console.log('util.js ondurationchange total=' + total)
}
audio.ontimeupdate = function () {
var time = audio.currentTime
// console.log('util.js ontimeupdate time=' + time)
}
audio.onprevious = function () {
audio.cover = 'https://xx.jpg'
audio.title = "钢琴曲"
audio.artist = "莫扎特"
// Replace with NetEase cloud music resource link
audio.src = 'https://xx.mp3'
console.log(' util.js on previout event from notification ')
}
audio.onnext = function () {
audio.cover = 'xx.jpg'
audio.title = '轻音乐';
audio.artist = '王菲'
// Replace with NetEase cloud music resource link
audio.src = 'https://xx.mp3'
console.log(' util.js on next event from notification ')
}
},
getAudioPlayState() {
audio.getPlayState({
success: function (data) {
console.log(`getAudioPlayState success: state: ${data.state},src:${data.src},
currentTime:${data.currentTime},autoplay:${data.autoplay},loop:${data.loop},
volume: ${data.volume},muted:${data.muted},notificationVisible:${data.notificationVisible}`);
},
fail: function (data, code) {
console.log('getAudioPlayState fail, code=' + code);
}
});
},
startPlay() {
audio.play();
},
pausePlay() {
audio.pause();
},
stopPlay() {
audio.stop();
},
seekProress(len) {
audio.currentTime = len;
},
setVolume(value) {
audio.volume = value;
},
setMute(isMuted) {
audio.muted = isMuted
},
setLoop(isloop) {
audio.loop = isloop
},
setStreamType() {
if (audio.streamType === 'music') {
audio.streamType = 'voicecall'
} else {
audio.streamType = 'music'
}
console.error('audio.streamType =' + audio.streamType);
},
setTitle(title) {
console.info('setTitle=' + title);
audio.title = title;
},
setArtist(artist) {
console.info('setArtist artist=' + artist) ;
audio.artist = artist;
},
setCover(src) {
console.info('setCover src=' + src);
audio.cover = src;
}
}
2) 在首页Main的生命周期onShow方法中添加监听audio事件,调用utils.js中的listenAudio,代码如下:
3) 在音频Audio页面生命周期onShow方法中添加监听audio事件,调用utils.js中的listenAudio,由于在播放页面需要显示播放进度,单独监听了进度回调事件,代码如下:
onShow(options) {
var that = this;
utils.listenAudio();
audio.ondurationchange = function () {
console.log('audio ondurationchange')
that.total = audio.duration
console.log('audio ondurationchange total=' + that.total)
}
audio.ontimeupdate = function () {
that.time = audio.currentTime
console.log('ontimeupdate time=' + that.time)
}
},
欲了解更多详情,请参见:
快应用audio开发指导:
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-audio
原文链接:https://developer.huawei.com/consumer/cn/forum/topic/0204411131669010359?fid=18
原作者:Mayism