5

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 downloaded in the Flash tab of Firebug.

I included the following files in this order:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="https://raw.github.com/happyworm/jPlayer/master/jquery.jplayer/jquery.jplayer.js" type="text/javascript" charset="utf-8"></script>

And I have this in the DOM that loads:

  $("#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/",
    supplied: "mp3",
    volume: 1,
    wmode:"window",
    solution: "html,flash"
  });

I have this HTML:

<div id="jquery_jplayer" style="height: 0px"></div>
          <div 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>

And Firefox is not able to play the MP3 file. I can also see a hidden object which looks like this:

<object width="1" height="1" id="jp_flash_0" data="http://cloudfactory-transcription.s3.amazonaws.com/javascripts/Jplayer.swf" type="application/x-shockwave-flash">  <param name="flashvars" value="jQuery=jQuery&amp;id=jquery_jplayer&amp;vol=1&amp;muted=false">
<param name="allowscriptaccess" value="always">
<param name="bgcolor" value="#000000">
<param name="wmode" value="window">
</object>
the Tin Man
  • 158,662
  • 42
  • 215
  • 303
Gagan
  • 4,278
  • 7
  • 46
  • 71

2 Answers2

14

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",
});
Lloyd
  • 8,204
  • 2
  • 38
  • 53
  • thanks your changes seems to work in Fiddle but when I brought the same code to my project it didn't work. Some error pops out saying "jPlayer 2.1.0 : id='jquery_jplayer' : Error! Attempt to issue media playback commands, while no media url is set. Use setMedia() to set the media URL. Context: play" Any idea why this error is poping out in Firefox. By the way i tried pasting all the code of Iframe from Fiddle but still this error pops out. Thanks – Gagan Dec 29 '11 at 06:27
  • But when i copied the code from Iframe and pushed this static page to heroku, it works. Any idea why is this happening? Does it needs some kind of hosting? – Gagan Dec 29 '11 at 08:09
  • I just tried to make a new html file by copying the exact html inside the iframe of result tab of fiddle page that you have posted. Dont you think it also should work, but it didn't :(. – Gagan Dec 30 '11 at 03:00
  • 1
    i saved the Fiddle iFrame source as a separate html file.. it didn't work in Chrome as the MP3 path was no longer valid.. changing the MP3 to http://static1.grsites.com/archive/sounds/animals/animals001.mp3 solved that.. in Firefox it didn't work as the default Flash security settings prevent a local HTML file loading a remote resource (http://www.jplayer.org/latest/js/Jplayer.swf) – Lloyd Dec 30 '11 at 10:10
  • thanks great comment. I didn't know that Firefox default Flash security settings prevent a local HTML file loading a remote resource – Gagan Jan 02 '12 at 02:59
2

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")});
ismael33
  • 1,069
  • 8
  • 5