Firefox OS: How to prevent music/video to stop playing when the app goes into the background

If you have worked before or are currently working in a music player for mobile you have probably encountered this issue before. Especial measures are usually needed to prevent the system from pausing playback when an App goes into the background, a situation that is obviously going to happen on any serious music player.

When I first pushed my current project, a music player, into the keon for testing the thing worked even when the screen was off or the app was sent to the background. I was skeptic that something that usually requires care in any other system simply works like that, but I decided not to think much about it and keep working on the other aspects of my app.

Fast forward to yesterday, when I decided to build the last version of Firefox OS and flash my phone… and my app is no longer working. Turns out the behaviour it was showing before was the result of a bug and you do need to do some work for it to keep playing. It took some digging, since the answer on how exactly the audio channels work is somewhat hidden in the documentation, but once I got it to work I decided to document in a simple way so future devs can just follow a few simple steps.

Let’s just get to it.

Firefox OS and its Audio Channels

Firefox OS uses a AudioChannels webAPI that has several layers of audio channels ordered by priorities like this:

  • normal: UI sounds, web content, music, radio
  • content: music, video.
  • notification: New email, incoming SMS
  • alarm: Alarm clock, calendar alarms
  • ringer: Incoming phone calls.
  • telephony: Phone calls, voip calls.

The OS mutes all channels under a certain priority when specific events triggered. For example, when an app is sent to the background the channel under content (normal in other words) is muted and when a call is triggered, all channels under ringer are muted.

As far as I have experimented, most audio and video is played in normal by default (kinda expected huh?) and will not change unless specified.

More on this system here.

So… how do I change which channel my app is using?

Well, first you have to add a permission in the manifest to be able to use any channel beyond normal.

Before continuing please note that not all apps have access to all channels! Hosted webApps can access the normal and content channels, privileged Apps can access normal, content, notification and alarm channels. Ringer and telephony are only available on certified apps, which we don’t get to make, unless you are up for some hacking 😉

More on which type of app gets access to what here.

To add a permission on your manifest, search for permissions parameter and add:

"permissions": {
"audio-channel-content":{"description":  "Use the audio channel for a music player"},
"audio-channel-notification":{"description":  "Use the audio channel for notifications"},
"audio-channel-alarm":{"description":  "Use the audio channel for a alarms"},

And so on. Remember to add only the permissions you need!

Now, on every audio and video tag on your code you will need to specify the used channel, like this:

<audio id="ThePlayer" mozaudiochannel="content">
<audio id="TheAlarm" mozaudiochannel="alarm">

And so on. I took this info from the document here.

That’s it. Hope it helps!


An upcoming web developer and android app-maker with an interest on using reliable tech in creative ways, open source projects and start-ups.

Tagged with: , ,
Posted in developer tips
2 comments on “Firefox OS: How to prevent music/video to stop playing when the app goes into the background
  1. Hi,

    I’m working on my webradio app for Firefox Os and i can’t play my stream in background.

    In my manifest i have add the permission like: 
    “permissions”: {
    “audio-channel-content”:{“description”:”Use the audio channel for the music player”}

    and i use for playing:

    I can play my audio stream during 2mn:

    The first one when the phone is unlock.
    After 1mn my phone auto-lock the screen and it continue playing for another minute.

    Do you have any idea?

    I have also post on stackoverflow:

    Thanks 😉

  2. Thanks, great tip, worked a treat for me. (The main blocker was that I had to remove a previous version of the app as the simulator dashboard didn’t correctly update the installed version; so it looked like it wasn’t working, but it was actually because an old version of the app was still being started.)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: