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>
  <link type="text/css" href="/dist/skin/pink.flag/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">
        ready: function () {
          $(this).jPlayer("setMedia", {
            title: "Bubble",
            m4a: "",
            oga: ""
        cssSelectorAncestor: "#jp_container_1",
        swfPath: "/js",
        supplied: "m4a, oga",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
Loading skin HTML...

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

previous step


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.