# 問題描述：
音樂播放過程中，切換到應用其他頁面時，用後臺的狀態列切換音樂時音樂會暫停。

# 問題分析：
華為audio介面只能在頁面中使用，當audio所在的頁面退出後，頁面銷燬，繫結的上下文物件也隨之不存在。 此時，在通知欄上一首、下一首切換歌曲時，後臺播放服務首先暫停當前歌曲，狀態重置，但是audio介面的繫結事件找不到上下文物件，無法觸發previous和next事件，導致上述現象。

# 解決方案:
在應用首頁監聽audio事件，而不僅僅是在播放頁面新增，當使用者離開播放頁面時，依然可以監聽到audio的每個事件，從而去控制播放邏輯。

注意：由於華為快應用引擎不支援在app.ux裡呼叫audio介面，所以當使用者退出了整個應用，雖然後臺依然在播放，但是快應用是不能收到audio的事件回撥的。

# 實現程式碼：
以下示例demo中有兩個頁面：首頁Main和音訊Audio。為了避免重複程式碼，可維護性，將audio的相關程式碼獨立出來作為一個公共的js，方便每個頁面呼叫。

1）公共utils.js：

```java
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，程式碼如下：

```java

audio通知欄切換歌曲停止播放，怎麼破

相關文章