why is jPlayer not playing my MP3 files in Firefox?

Question

I am having trouble playing an MP3 file using jQuery Jplayer in Firefox 8. I have installed the latest flash for my browser and I can see that the jplayer.swf file is being down

Answer 1

i had the same problem i made a jplayer audio playlist and loaded mp3 files in it.

it was working on chrome not on firefox

i fixed that by adding solution :flash

    $(document).ready(function(){

    var myPlaylist = new jPlayerPlaylist({
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
     }, [
    {
        title:"Cro Magnon Man",
        artist:"miaow",
        mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
        oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
    }

    ], {
    playlistOptions: {
  enableRemoveControls: true
    },
      swfPath: "js",
    supplied: "mp3",
    wmode: "window",
    solution: "flash",
    });

    $("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});

Answer 2

there were a couple of things:

1. Unless you specify an explicit Container Ancestor jPlayer defaults to using the DOM Element with the Id #jp_container_1, which you did not supply in your HTML
2. As FF HTML 5 Audio cannot play MP3 it requires the latest jPlayer SWF to work, your jPlayer constructor code pointed to an old SWF version.

Here is a Fiddle with the Fix: http://jsfiddle.net/75lb/gdLnT/

The corrected HTML:

<div id="jquery_jplayer"></div>
<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div id="jp_interface_1" class="jp-interface all_rounded_corners">
        <ul class="jp-controls">
          <li><a href="#" class="jp-play pp" tabindex="1">play</a></li>
          <li><a href="#" class="jp-pause pp" tabindex="1">pause</a></li>
          <li><a href="#" class="jp-previous traverse" tabindex="1">Previous</a></li>
        </ul>
        <div class="jp-progress" style = "display:none;">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
      </div>
    </div>
</div>

The corrected Javascript:

$("#jquery_jplayer").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", { mp3: "http://sound26.mp3pk.com/indian/ladiesvsricky/ladiesvsrickybahl01(www.songs.pk).mp3" } );
    },
    //swfPath: "http://cloudfactory-transcription.s3.amazonaws.com/javascripts/",
    swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
    supplied: "mp3",
    volume: 1,
    wmode:"window",
    solution: "html,flash",
});