Make your Firefox OS app feel alive with video and audio

Firefox OS applications aren’t just about text: there is no better way to make your app feel alive than adding some videos or audio to it. Let’s explore different ways we can use as developers to enhance our mobile masterpiece.

Audio and video HTML tags

Since we are talking about HTML, it makes total sense to think about using the <audio>, and <video> tag to play those media in your Firefox OS app. If you want to add a video in your application, just use this code.

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Your browser does not support the video element.
</video>

In this code example, the user will see a video player with controls, and will have the opportunity to start the video. If your application is running in a browser not supporting the video tag, the user will see the text between the tag. It’s still a good practice to do so, even if your primary target is a Firefox OS app, because since it uses HTML5, someone may access it from another browser if it’s a hosted app. Note that you can use other attributes for this element.

As for the audio tag, it’s basically the same.

<audio id="demo" src="/music/audio.mp3" autoplay loop></audio>

In this example, the audio will start automatically, and will play the audio file, in a loop, from the relative path: it’s perfect for background music if you are building a game. Note that you can add other attributes to this element too.

Of course, using those elements without JavaScript give you basic features, but no worries, you can programmatically control them with code. Once you have your HTML element, like the audio example you just saw, you can use JavaScript to play, pause, change the volume, and more.

document.querySelector("#demo").play(); //Play the Audio
document.querySelector("#demo").pause(); //Pause the Audio
document.querySelector("#demo").volume+=0.1; //Increase Volume
document.querySelector("#demo").volume-=0.1; //Decrease Volume

You can read more on what you can do with those two elements in the Mozilla Developer Network documentation. You also want to give a closer look to the supported format list.

Use audio while the screen is locked

Maybe you are building a podcast app, or at least you need to be able to play audio while the screen is locked? There is a way to do it by using the audio tag. You simply need to add the mozaudiochannel attribute with the value of content to your actual tag.

<audio mozaudiochannel="content" preload="none"
  src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"
  autoplay></audio>

Actually, it’s not quite true as this code won’t work as is. You also need to add a permission to the manifest file.

"permissions": {
  "audio-channel-content":{
    "description":"Use the audio channel for the music player"
  }
}

Having the manifest line above will authorize your application to use the audio channel to play music, even when the screen is locked. Having said that, you probably realize that this code is specific to Firefox OS for now. I intentionally put the end of the last sentence in bold as it’s one thing you need to understand about Firefox OS: we had to create some APIs, features or elements to give the power HTML deserve for developers, but we are working with the W3C to make those standards. In the case that the standards won’t be the same as what we created, we’ll change it to reflect it.

Firefox OS Web activities

Finally, something very handy for Firefox OS developers: the Web Activities. They define a way for applications to delegate an activity to another (usually user-chosen) application. They aren’t standardized, at the time of writing. In the case that will be interesting to us, we’ll use the Web Activity call open, to open music or video files. Note that for video, you can also use the view activity that basically does the same. Let’s say I want to open a remote video when someone clicks on a button with the id open-video: I’ll use the following code in my JavaScript to make it happen.

var openVideo = document.querySelector("#open-video");
if (openVideo) {
    openVideo.onclick = function () {
        var openingVideo = new MozActivity({
            name: "open",
            data: {
                type: [
                  "video/webm",
                  "video/mp4",
                  "video/3gpp",
                  "video/youtube"
                ],
                url: "http://v2v.cc/~j/theora_testsuite/320x240.ogg"
            }
        });
    }
}

In that situation, the video player of Firefox OS will open, and play the video: it’s that easy!

In the end…

You may or may not need to use those tricks in your app, but adding videos or audio can enhance the quality of your application, and make it feel alive. At the end, you have to give a strong experience to your users, and it’s what will make the difference between a good and a great app!

About Frédéric Harper

As a Senior Technical Evangelist at Mozilla, Fred shares his passion about the Open Web, and help developers be successful with Firefox OS. Experienced speaker, t-shirts wearer, long-time blogger, passionate hugger, and HTML5 lover, Fred lives in Montréal, and speak Frenglish. Always conscious about the importance of unicorns, and gnomes, you can read about these topics, and other thoughts at outofcomfortzone.net.

More articles by Frédéric Harper…

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


5 comments

  1. David R

    Why do all of your examples use querySelector instead of getElementById?

    It obviously doesn’t matter for this example, but there is a significant performance difference between the two:

    http://jsperf.com/queryselector-vs-getelementbyid-pure

    November 11th, 2013 at 16:40

    1. Frédéric Harper

      You are right; it would have been faster to use getElementById in those cases as they are simple selectors. As you wrote, there is no impact on the execution of this code, but could have one on a more complex application. I guess it’s a habit I have to use querySelector.

      November 12th, 2013 at 07:05

  2. web application developers 

    I like the idea, playing audio while screen is looked. I’m working as a web application developers and i really wants to implement this application and make my own experience could you share how can i start this application whole process.

    November 12th, 2013 at 22:13

    1. Frédéric Harper

      A good start is the documentation at https://developer.mozilla.org/en-US/Apps . It will help you understand the platform, and guide you to start to build Firefox OS application.

      November 13th, 2013 at 08:05

  3. Luke

    Nice! Do you have a listing of audio/video formats FirefoxOS supports?

    I’ve done some Firefox development, I was also wondering if you’ll be able to use XUL, cross-site ajax, and other features that addons use, in Firefox apps?

    November 13th, 2013 at 14:59

Comments are closed for this article.