问题形容:

音乐播放过程中,切换到利用其余页面时,用后盾的状态栏切换音乐时音乐会暂停。

问题剖析:

华为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,代码如下:

<script>  import utils from '../Util/utils.js';  module.exports = {    onShow(options) {       utils.listenAudio();    },  }</script>

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