[Fx OS] Background Media Play

by Alive Kuo - - posted in audio, fxos | Comments

If you want to have you own media playing app to be able to run at background, and/or has the ability to interrupt other playing audio, please view this article for what to do.

Audio Channel Permission

You need to specify this permission in the manifest of your app.

And yes, this means we don’t allow a web page without the manifest to play at background.

1
2
3

"permissions": {
  "audio-channel-content": {}
}

The content represents the name of the audio channel.

Note: Video’s permission also uses the same audio-channel-content.

Audio Channel Types

We have five audio channels currently:

  • normal: Default channel of any media element, including video.
  • content: Especailly stands for content like music.
  • notification: Include desktop-notification sounds
  • ringer: Incoming call ringer
  • alarm: Alarm has a specific requirement to interrupt any other channel above.
  • telephony: Voice.

Volume Settings

  • Normal and content channel are sharing the same volume settings.
  • Notification and ringer are another set.
  • Other has its own settings key.

Audio Competing Rules

  1. We’re interrupting the lower channel when higher channel occurs.
  2. If the same channel are playing and using content channel, the one who gets visibility (go to foreground) would be the winner.
  3. The foreground page/app is always playable. However the channel type decides it could interrupt background playing content or not.
  4. The background page/app is playable if and only if the background is causing by screen off, and the page/app is the current displayed one.

I would explain the rules more in another article ;)

[Statically] HTML Media Element

You could assign audio channel type to the media elements in HTML.

1
2

<audio mozaudiochannel="content"></audio>
<video mozaudiochannel="content"></video>

Please keep in mind you need relevant channel permission.

Note: It’s mozaudiochannel instead of mozaudiopchanneltype here.

[Dynamically] Javascript

Sometimes we need to dynamically generate the player element:

1
2
3
4
5

var audio = new Audio();
audio.mozAudioChannelType = 'content';

// Set audio channel type before setting src to avoid decoder confuses.
audio.src = 'xxx.ogg';

Change the channel of the audio to another type is not allowed.

You should create another audio/video instance if you want to be played in another channel.

(OPTIONAL) If you want to know you’re interrupted by higher channel

Add mozinterruptbegin/mozinterruptend event handler if you need to do something with interruptions.

1
2
3
4
5
6

  var player = document.getElementById('audio#my-player');

  // ...
  // The event is fired on the media element. 
  player.addEventListener('mozinterruptbegin', function onInterrupted() {//do sth....}); 
  player.addEventListener('mozinterruptend', function onResumed() {// do sth....});

Notices

  • Even if your are developing a HTML5 video playing app, and we all know that video shouldn’t be played at background due to strange UX, you should also consider to set content channel because video is expected to interrupt the current background playing media.

Reference

Comments