I have a web app (mobile 4.0) that uses html5 audio to play an mp3 file.  When the app goes into the background, the audio pauses automatically.  I need the audio to keep playing in the background.

The app has background support enabled and declares the “media” background category.  I added a console.log statement on a loop to confirm that the app is still running in the background, and it appears to be the case but the audio is still paused.  What am I doing wrong?

Here’s a simple reproduction (based on creating a Basic Web Application in Tizen Studio).

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/BackgroundAudio" version="1.0.0" viewmodes="maximized">
    <tizen:application id="59hzphXAzx.BackgroundAudio" package="59hzphXAzx" required_version="3.0"/>
    <tizen:background-category value="media"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.all"/>
    <icon src="icon.png"/>
    <name>BackgroundAudio</name>
    <tizen:profile name="mobile"/>
    <tizen:setting screen-orientation="portrait" context-menu="enable" background-support="enable" encryption="disable" install-location="auto" hwkey-event="enable"/>
</widget>

main.js

window.onload = function() {
    // TODO:: Do your initialization job

    // add eventListener for tizenhwkey
    document.addEventListener('tizenhwkey', function(e) {
        if (e.keyName === "back") {
            try {
                tizen.application.getCurrentApplication().exit();
            } catch (ignore) {}
        }
    });
    
    document.addEventListener('visibilitychange', function() {
    	console.log('Visibility change! Hidden: ' + document.hidden);
    });

    var audio = document.createElement('audio');
    audio.addEventListener('pause', function() {
    	console.log('Audio paused!');
    });
    audio.autoplay = true;
    audio.loop = true;
    audio.src = './audio.mp3';
    
    
    function heartbeat() {
    	console.log('App is still running...');
    	window.setTimeout(heartbeat, 5000);
    }
    heartbeat();
};

When I run the app in an emulator, I see the following log output:

01-31 09:06:27.340 : Debug / ConsoleMessage ( 2842 : 2842 ) : [59hzphXAzx] file:///js/main.js:27: App is still running…
01-31 09:06:30.080 : Debug / ConsoleMessage ( 2842 : 2842 ) : [59hzphXAzx] file:///js/main.js:14: Visibility change! Hidden: true
01-31 09:06:30.080 : Debug / ConsoleMessage ( 2842 : 2842 ) : [59hzphXAzx] file:///js/main.js:19: Audio paused!
01-31 09:06:33.000 : Debug / ConsoleMessage ( 2842 : 2842 ) : [59hzphXAzx] file:///js/main.js:27: App is still running…
01-31 09:06:39.000 : Debug / ConsoleMessage ( 2842 : 2842 ) : [59hzphXAzx] file:///js/main.js:27: App is still running…
01-31 09:06:45.010 : Debug / ConsoleMessage ( 2842 : 2842 ) : [59hzphXAzx] file:///js/main.js:27: App is still running…

You can see the visibilitychange event fires as the app goes into the background, and the ‘pause’ event fires on the audio.  The app is still running in the background.