jPlayer

HTML5 Audio & Video for jQuery

a project by happyworm

Step 7 : Add the JavaScript to instance jPlayer for audio

Now you will add the JavaScript that associates jPlayer with the HTML interface. To do this we will use the jQuery API and the jPlayer API, along with JavaScript code. For this guide, we are entering the code directly into the HTML source, but you can put it in an external file if you wish.

To instance jPlayer, add the following line to the HTML of your page's <head>:

<head>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            title: "Bubble",
            m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
            oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
          });
        },
        swfPath: "/js",
        supplied: "m4a, oga"
      });
    });
  </script>
</head>

Take care to include the jPlayer JavaScript code after the jPlayer plugin is included in your page.

Your <head> code should look like:

<head>
  <link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            title: "Bubble",
            m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
            oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
          });
        },
        swfPath: "/js",
        supplied: "m4a, oga"
      });
    });
  </script>
</head>

And you will create the following audio player on your page.
Press play to start the media.

Now that you have seen what it does, lets review the code explaining each line.

The $(document).ready(handler) code is part of jQuery and causes the handler function to be executed when the page is ready. Your code goes inside the {}.

$(document).ready(function(){
 // Code executed at jQuery ready.
});

The $("#jquery_jplayer_1").jPlayer(options) is the jPlayer constructor and takes the contents of the JSON object in the {} as its options. The line is actually part jQuery and part jPlayer. The $("#jquery_jplayer_1") is a jQuery() selector, which is used to select the jPlayer <div>. The jPlayer(options) is the jPlayer constructor.

$("#jquery_jplayer_1").jPlayer({
  // Options
});

The options object passed to the jPlayer constructor is the only piece of pure JavaScipt, written as JSON, which stands for JavaScript Object Notation. Using JSON, we define an object with properties matching the jPlayer options that we want to configure. We define the ready property to create a jPlayer ready event handler. We define the swfPath property to set jPlayer's path to the Flash fallback SWF file. We define the supplied property to configure jPlayer ready to play either M4A files or OGA files, since we will be supplying both formats to increase x-browser HTML support. All other options will use their default value.

{
  ready: function () {
    // Code to execute at jPlayer ready
  },
  swfPath: "/js",
  supplied: "m4v, ogv"
}

The ready event handler function uses the $(this) jQuery code to select the entity that generated the event, which is the jPlayer <div>. The jPlayer("setMedia", media) jPlayer code sets up jPlayer with the media. The media is defined using a JSON object with properties matching the supplied formats and an optional poster image URL.

ready: function () {
  $(this).jPlayer("setMedia", {
    title: "Bubble",
    m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
    oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
  });
}

Edit the media formats and their URLs to match those for your media. Remember to adjust the supplied option to match the formats you are supplying.

Note that for audio, you must supply either M4A or MP3 files to satisfy both HTML5 and Flash solutions. An M4A file is an MP4 AAC encoded audio. The optional OGA format is used to increase cross-browser support for HTML5 browsers such as Firefox and Opera.

previous step | summary

Notes:

You should not issue commands to jPlayer before its ready event has occurred, otherwise the Flash fallback solution will not be ready and jPlayer will raise an error event.

Top tip to kill IE is to have bad JSON, where you left in a trailing comma.
{prop1:value1,prop2:value2,}