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!

Advertisements
Tagged with: , ,
Posted in developer tips

Toast-like notification using HTML5

While working on an webapp that involves streaming music (using an audio tag) it came to my attention that when the audio needed to buffer the user had no way of knowing why the music stopped. Everyone I showed the app to acted confused any time the music unexpectedly stopped, something common if you are developing for mobile.

When working on Android I was fond of using toast notifications for this kind of thing and my first instinct was to search for something similar for HTML5. I came upon the toastr library, which works super well for simple notifications, but I soon felt frustrated by how limited I was on the background colour and ability to display/hide the notification on events rather than timed moments, something I constantly felt while working with Android target 2.3. I considered modifying the toastr library to suit my needs, but eventually dropped the idea of using an external library when I realized just how simple it would be to create my own notification for this specific purpose.

I now share with you the code I used for this for you can copy and paste into your project with ease if you need it, or modify it to suit your needs.

For the HTML I used a simple floating div with an image and text:

<div id="toast">
<img src="img/refresh.png"></img> Please wait, buffering
</div>

The best idea is to add this guy on the main document’s body. It will be hidden most of the time and will only show in an absolute position when needed.

I styled it using CSS, giving it a floating box feel with an absolute position of the top right corner of the screen and added an animation for a better “loading” feel.

@-moz-keyframes rotate {
from {
-moz-transform: rotateZ(0deg);
}
to { -moz-transform: rotateZ(-360deg);}
}

@-webkit-keyframes rotate {
from {
-webkit-transform: rotateZ(0deg);
}
to { -webkit-transform: rotateZ(-360deg);}
}

#toast{
min-height: 10%;
max-width: 40%;
padding-right: 10px;
background-color: rgba(4,4,4,0.8);
position: absolute;
right: 10px;
top: 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
color: white;
box-shadow: 7px 7px 4px #888888;
}

#toast > img{
-moz-animation: rotate 1s;
-webkit-animation: rotate 1s;
-moz-animation-timing-function:linear;
-webkit-animation-timing-function:linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

You can control when the notification pops or hides from JavaScript in two ways, using jQuery animations or simple class toggling.

Using jQuery animations

The better looking of the ways, you simply select the toast in jQuery and use the .fadeIn() method to make it appear and .fadeOut() to make it disappear. In my case, since I am making a buffering dialogue, I can use this when certain events trigger:

$("audio").on("waiting",function(){
$("#toast").fadeIn();
});

$("audio").on("playing",function(){
$("#toast").fadeOut();
});

Without animations

If for any reason you can’t/don’t want to use animations, you can simply toggle the hidden class to make it appear or disappear.

$("audio").on("waiting",function(){
$("#toast").removeClass("hidden");
});

$("audio").on("playing",function(){
$("#toast").addClass("hidden");
});

What if I want it to simply disappear after some time?

Like a normal toast? This is easily done with timing events

// $("#toast").removeClass("hidden");
   $("#toast").fadeIn();
   setTimeout(function(){
    // $("#toast").addClass("hidden");
       $("#toast").fadeOut();
                        },1000);

Changing the text inside the toast from JavaScript

In this example, which includes an image inside the toast, changing the text is as easy as:

$("#toast").contents()[2].nodeValue = "Some other stuff";

Likewise, we can change the image programatically:

$("#toast >img").attr("src","img/new.png");

What I like about making our own toasts is that we can easily specify the colour (so it matches our app’s palette), text, image and timing.

Demo

This notification will look like this.

What I like about making our own toasts is that we can easily specify the colour (so it matches our app’s palette), text, image and timing. Feel free to copy this into your project and modify it to suit your needs.

Tagged with: , , ,
Posted in developer tips

Detect if app is running on Firefox OS using JavaScript

While we live in an time of Responsive Web Design where a webApp is expected to adapt to any screen (and device) it is still useful to have some way of checking if you are running this or that platform in order to add platform-dependent features. In FirefoxOS’s case maybe we want to add listeners for web activities, or code meant for other web APIs. I was playing around with the idea of a page that loads a different set of UI elements on a Firefox OS phone so I could try out the (currently) unstable Building Block Drawer. PhoneGap is a widely used framework for this kind of things, but it does not support Firefox OS just yet.

Thankfully there is another framework that already does this called Enyo. I have not tried it extensively, but it looks like a pretty complete framework for building webApps. The thing is, maybe you have a project already going and you do not want to add an entire framework just for this feature like I was. Thankfully, you can add just a Javascript library from the framework to get it to work.

  1. Go to Enyo’s download page and download their Bootplate zip.
  2. Unzip and look for a build folder
  3. Copy the enyo.js library from the folder into your project and import. All done!

Now all you need to do in JavaScript is:

if(enyo.platform.firefoxOS) {
    //do FirefoxOS especific stuff
                            }

Hope it helps!

Tagged with: , , , ,
Posted in developer tips

Quick tip: On Firefox OS Building Blocks failing CSP

One of the cool things about building apps using web technologies is just how much material you can get to bootstrap your idea. While github is packed with libraries and frameworks one of my favourite places to get resources for making interfaces in Firefox OS is the UX Building blocks since they are pretty much explanations on how the elements on the gaia apps are made.

The different elements on the MDN site should work perfectly with a copy and paste. However, when I first tried including an Action Menu into my packaged app and submitting it into the marketplace the new element failed the marketplace’s automatic validation, raising a CSP (Content Security Policy) violation error.

A detail of the Action Menu’s HTML was violating the CSP. I figured out how to work around it and now I want to share in case nay other potential devs run into this error.

On MDN we get the following HTML code for the action menu:

<form role="dialog" data-type="action" onsubmit="return false;" id="sample-menu">
  <header id="sample-title"> Title </header> <!-- this header is optional -->
  <menu>
    <button id="button1"> Action 1 </button>
    <button id="button2" disabled> Action 2 (disabled) </button>
    <button id="button3"> Action 3 </button>
    <button id="cancel"> Cancel </button>
  </menu>
</form>

This first line was the one cited as violating CSV. Some experimentation revealed that the problem was around the onsubmit="return false;" instruction, which I believe violates Firefox OS policy against in-line scripting.

However, that instruction is needed for the menu to work properly, so what I did was to remove that line and add it on JavaScript when the app starts:

window.onload=function(){
  $("form").get(0).onsubmit="return false;"
  //More stuff you usually do
}

And the HTML is left like this:

<form role="dialog" data-type="action" id="sample-menu">
  <header id="sample-title"> Title </header> <!-- this header is optional -->
  <menu>
    <button id="button1"> Action 1 </button>
    <button id="button2" disabled> Action 2 (disabled) </button>
    <button id="button3"> Action 3 </button>
    <button id="cancel"> Cancel </button>
  </menu>
</form>

This is more of a quick workaround than a proper fix, but it works. The app goes trough the Marketplace’s validation smoothly now.

So keep an eye on these details when working the Building Blocks!

Tagged with: , , , , ,
Posted in developer tips

Quick tip: long press on Firefox OS

One of the most natural actions in modern smartphones is the longpress, which has become sort of the equivalent of the right click for mobile, with users expecting additional options to pop up at a longer than normal press.

When I jumped into Firefox OS I had to switch my mentality from ‘native’ to web, where there is not (yet) any default “onlongpress” event, with forces us to get a little creative. I tried with some libraries and plugins but none worked as expected on the phone, so I decided to stop looking for a lazy way and do it with simple JavaScript and timers. Turns out it is super simple:

First add a button, like I do here using some jQuery, and set its “ontouchstart” and “ontouchend” to two different functions:

$("some_element").prepend('<button ontouchstart="PressDown(this)" ontouchend="ReleaseUp(this)" >'+something+'</button>');

Now, the key is to use a time event on the PressDown function that executes whatever you expect the long press to do and cancels the event on ReleaseUp. You can use a share boolean variable to choose if you execute some other short press code or not. Let me show you:

function PressDown(e){
PressTime=false;
Timer=setTimeout(function(){
PressTime=true;
// long press code goes here
},1000);
}

function ReleaseUp(e){
if(!PressTime){
clearTimeout(Timer);
// short press
}
}

Simple and easy.

The thing is, you won’t be able to test this on the Firefox OS simulator, since the current version reacts to click events and not to touch events. How can we test this without a phone?

In cases such as this one I recommend the use of modernizr, a JavaScript library that allows devs to test for features in whatever your code is running on and take different decisions appropriately  in CSS or JavaScript. You can create a custom .js file which tests only for the functionalities we need, like the presence of a touch screens in this case which is a function listed under misc in the download section.

After importing modernizr it is just a matter of testing for touch and creating a diferent button for each case:

if (Modernizr.touch){
$("#"some_element"").prepend('<button ontouchstart="PressDown(this)" ontouchend="ReleaseUp(this)" >'+something+'</button>');
}else{
$("#"some_element"").prepend('<button onmousedown="PressDown(this)" onmouseup="ReleaseUp(this)" >'+something+'</button>');
}

Very simple

Posted in Uncategorized

Quick tip: testing if web activities are available

One of the coolest additions to Firefox OS are Web Activities, a function similar to Android’s intents they allow apps to delegate activities to each other quite easily, given devs a way for web apps to interact with each other without much hassle.

I won’t go into the specifics of Web Activities because I am learning to use them myself (more info here) but I wanted to share a quick tip I discovered while in Madrid.

I was intending too use Web Activities for my app to show as an option when the users attempts to play youtube videos. It worked well, but when I tried running it on desktop Firefox as it was, the app froze without any warnings or errors of any type in the console.

To test for the availability of Web Activities, you can simply test for the mozSetMessageHandler function:

if(navigator.mozSetMessageHandler!=undefined){

//this executes if Web Activities are avaliable in the platform

navigator.mozSetMessageHandler('activity', function(activityRequest) {

//do something cool when your app is called from other app

});

}

Somewhat crude, but works

Posted in Uncategorized

Short Impressions on the Geeksphone Keon, the Firefox OS dev phone

There is always a sort of aura of importance on the first of anything. You could sort of feel this mixture of excitement and curiosity when the first Keons were handed on Madrid.

20130423_151413

Make no mistake. This is not the average consumer phone and I would not recommend it for any casual user just yet, but for developers looking for a device in which to run and test their code on Mozilla’s entry into the mobile web this is certainly an excellent opportunity.

The Keon is a medium to low end smart phone, and a good sample of the target demographic for Firefox OS’s emerging markets strategy of bringing the web at a low cost. Even so, the guys at Geeksphone have made a wonderful job from boxing to the actual hardware.

20130423_151246

I am usually not one for package presentation but the Keon’s box took me by surprise. A cubic cardboard cover that on removal reveals the phone, presented on a 45 degree angle with no other distraction. Clean and simple, it reinforces the “first device” importance I commented before. All acesories (charger, battery, cable…) were stored in tabs under the phone’s holder.

20130423_151446

As I said, I usually do not give much for packaging, but I tough this one was pretty neat.

The phone itself is small and fit comfortably in the hand. The back and sides of the phone is made of Firefox-orange plastic that makes and odd but unique contrast with the typical black bordered screen. I like how simply but unique it is.

This are the nice presentational elements, but this is a phone for developers, so how does it goes for developing?

The specs on the phone are nothings especial, a 3.5″ HVGA screen, a Qualcomm single core 1Ghz processor ,512 MB of RAM… which goes along nicely with the entire point of Firefox OS, which is to bring performance to low-end smart phones. You can also expect features such as Bluetooth, Fm Radio, accelerometers, GPS, micro sd card and a 3 MP camera which should give us devs a good range of things to try for our apps.

20130422_215004

The phones we received on Saturday were running an older build of Firefox OS and were we asked to update as soon as it booted up. I do not know if phones shipped in the future will include the newer version, but either way the update can be done OTA with just a button press. I am now running what is market as Boot2Gecko 1.0.1.0-prerelease, which apparently only includes the bare-bones apps such as camera, gallery, radio, settings, marketplace… you get the idea. Missing are all the cool demos the simulator has, like the cool CrystalSkull or the less-cool but more useful Test Sensor. Not much a problem since the source code for all the demos is available and pushing apps to the phone is a snap, as I will comment on later, but I would be nice to have it preinstalled nonetheless so devs can see what the phone can do out of the box. Maybe it is better to get a clean phone to play with as a developer and I am alone in this opinion. Anyway! Uninstalling apps is very easy so that should not be much problem.

Setting up the connection between your computer and the phone for app pushing requires some work. But once it works it goes along smoothly. I have heard Mac users manages to get it working as soon as they plugged in the device, while Windows users require a driver which, I hope, Mozilla or Geeksphone will make available soon and Linux users are going to have to do a little more (as usual). I have made a post on how to make it work on Linux.

In order to push apps you are going to need to use the Firefox OS simulator 3.0 version, which works as a Firefox plugin. Once your device is connected the simulator’s dashboard should show a “device connected” message.

Then you click the “push” button next to your apps name and the notification for remote debugging will appear on the phone’s screen. Accept it and wait for the installed app confirmation. Done!

Overall I am very happy with the device. Not everything is perfect however, but must of it has too do with the typical quirks you expect on an OS under heavy development, minor bugs here and there, wifi sometimes disconnecting while looked or some notifications not showing up. But I expect this things to get better as the OS matures.

But when I see a dev phone my approach is to think of it as blank canvas. It is not to be judged by what it is, but for what it could be.

Tagged with: , , , , ,
Posted in devices