title: Play .ogg OR .mp3 files in jplayer
body: <p>I am trying to use a particular audio file to play when a page loads.  The problem is, I do not know how to get jplayer to play EITHER .mp3 or .ogg.  </p>
  
  <p>Firefox supports .ogg, but Safari and IE do not. </p>
  
  <p>Therefore, I want the audio to play whatever file format the users browser supports.</p>
  
  <p>Here is the code in my .js file:</p>
  
  <pre><code>$f("#jquery_jplayer_1").jPlayer({
          ready: function (event) {
              $f(this).jPlayer("setMedia", {
                  oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
              }).jPlayer("play");
          },
          swfPath: "js",
          solution: 'html, flash',
          supplied: "m4a, oga",
          wmode: "window"
      });
  
      $f("#jquery_jplayer_2").jPlayer({
          ready: function (event) {
              $f(this).jPlayer("setMedia", {
                  oga:"http://www.davidhornbrook.com/chad/test3/template/David.ogg"
              }).jPlayer("play");
          },
          swfPath: "js",
          solution: 'html, flash',
          supplied: "m4a, oga",
          wmode: "window"
      });
  
      $f("#jquery_jplayer_3").jPlayer({
          ready: function (event) {
              $f(this).jPlayer("setMedia", {
                  mp3:"http://www.davidhornbrook.com/chad/test3/template/David.mp3"
              }).jPlayer("play");
          },
          swfPath: "js",
          solution: 'html, flash',
          supplied: "mp3",
          wmode: "window"
      });
  </code></pre>
  
  <p>The code in the .html file is this:</p>
  
  <pre><code>&lt;div id="controls-wrapper" class="load-item"&gt;
                  &lt;div id="controls"&gt;
                      &lt;a id="prevslide" class="load-item"&gt;&lt;/a&gt;
                      &lt;a id="play-button"&gt;&lt;img id="pauseplay" src="img/pause.png" alt="fashion" /&gt;&lt;/a&gt;
                      &lt;a id="nextslide" class="load-item"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="jquery_jplayer_2" class="jp-jplayer"&gt;&lt;/div&gt;
                  &lt;div id="jp_container_1" class="jp-audio"&gt;
                      &lt;ul class="jp-controls"&gt;
                          &lt;li&gt;&lt;a href="javascript:;" class="jp-play" tabindex="1"&gt;play&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="javascript:;" class="jp-pause" tabindex="1"&gt;pause&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I am sure there is a way to do this, but I am at a loss right now.  ANY help would be appreciated.
  You may email me directly at chad at hornbook.com</p>
  
  <p>---------EDIT-------------</p>
  
  <p>I have done this as a stopgap measure.  In the html code I added this:</p>
  
  <pre><code>        &lt;!-- Content --&gt;
          &lt;div class="content"&gt;
          &lt;img src="img/HBLogo903.png" /&gt;
          &lt;/div&gt;
  
  
  
  
  &lt;audio autoplay=""&gt;
    &lt;source src="David.mp3" type="audio/mpeg" /&gt;
    &lt;source src="David.ogg" type="audio/ogg" /&gt;
  &lt;/audio&gt;
  
  
  
          &lt;!-- /Content --&gt;
  </code></pre>
  
  <p>Not an ideal situation by any means and I do not know if it will work in IE 6/7/8
  I do have this as the first line in my html</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  </code></pre>
  
  <p>Thanks everyone for any help :)</p>