jPlayer

HTML5 Audio & Video for jQuery

a project by happyworm

Step 8 : Summary for an audio player

previous step

Perform the following actions:

  • Upload the jPlayer JavaScript file and SWF file to: /js
  • Include jQuery in your <head>
  • Include jplayer in your <head>
  • Upload the jPlayer skin files to: /skin
  • Include the jPlayer skin in your <head>
  • Add the jPlayer skin HTML to your <body>
  • Add the JavaScript to instance jPlayer to your <head>

Your HTML code for the Pink Flag skin should look like: 

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" />
  <script type="text/javascript" src="/js/jquery.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"
          });
        },
        cssSelectorAncestor: "#jp_container_1",
        swfPath: "/js",
        supplied: "m4a, oga",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
      });
    });
  </script>
</head>
<body>
Loading skin HTML...
</body>
</html>

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

Media used in demo: © 2003 Miaow / Arnaud Laflaquiere - MiaowMusic.net

previous step

Notes:

If your media URLs do not work on some browsers and you are certain they are correct, then check your MIME type is correct in your server response.

The <!DOCTYPE html> was included in the example HTML for clarity. Forgetting to include it on the first line of HTML code is a common error.