问题形容：

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

问题剖析：

华为 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