d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Fixing Music Playback Pause With Huawei

Symptom

During music playback, when a user switches to another page in the app, and switches to playing another song using a status bar, the music playback pauses.

Analysis

The audio API can only be used only on the current app page. When a page where the API is called is closed, the page is destroyed and the bound context object no longer exists. In this case, when a user switches songs on the status bar, the song being played is paused and the playback status is reset. However, the context object cannot be found to trigger the previous and next events in the audio API. As a result, this problem occurs.

Solution

Listen to audio events on the app home page, not only on the playback page. In this way, when the user leaves the playback page, each audio event can still be listened to, so as to control the playback logic.

Note: Huawei Quick App Engine does not support calling of the audio API in app.ux. Therefore, when a user exits the app, the quick app cannot receive the audio event callback even though the music is still playing in the background.

Sample Code

The following demo has two pages: Main (home page) and Audio. To avoid repeated code and ensure maintainability, separate the code for the Audio page as a common JavaScript for each page to call.

1) Public utils.js:

2) Add an audio event listener to the lifecycle method onShow of the Main page and call listenAudio in utils.js. Sample code:

3) Add an audio event listener to the lifecycle method onShow of the Audio page, and call listenAudio in utils.js. The progress callback event is listened to separately because the playback progress needs to be displayed on the playback page. Sample code:

For more details, please check the following guide: Quick App Audio Development Guide.

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this