状态栏歌曲切换时音乐播放暂停怎么办

Question

在我的华为快应用中，在播放音乐的过程中，当用户在应用中切换到另一个页面，并通过状态栏切换到播放另一首歌曲时，音乐播放会暂停。它是如何发生的？

Answer 1

在应用主页上监听 audio 事件，而不仅仅是在播放页面上。这样，当用户离开播放页面时，每个audio事件仍然可以被监听，从而控制播放逻辑。

注意：华为快应用引擎不支持调用app.ux中的audioAPI。因此，当用户退出应用时，即使音乐还在后台播放，快应用也无法接收到audio事件回调。

以下演示有两个页面：Main（主页）和Audio。为避免重复代码和保证可维护性，将Audio页面的代码分开为一个公共JavaScript，供每个页面调用。

public 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 = "Piano music"
            audio.artist = "Mozart"
            // Replace with the 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 = 'Pop';
            audio.artist = 'Michael Jackson'
            // Replace with the 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;
    }
}

在Main页面的生命周期方法onShow中添加一个audio事件监听器，并在utils.js中调用listenAudio。示例代码：

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

在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)
      }
    },

更多详情，请查看以下指南：

Quick App Audio Development Guide

状态栏歌曲切换时音乐播放暂停怎么办

What Can I Do If Music Playback Pauses upon Song Switchover on the Status Bar

quickapps-cms

huawei-mobile-services