jPlayer - Use setMedia() to set the media URL

Question

I'm trying to use jPlayer under Firefox 3.6 (Ubuntu)

function loadmedia() {
  $('#jquery_jplayer_1').jPlayer('setMedia', {
    mp3: 'media/audio/04-Piste_4_1.mp3',
  });
}

$(document).ready(function () {
  $('#jquery_jplayer_1').jPlayer({
    ready: loadmedia,
    swfPath: 'static/jPlayer',
    errorAlerts: true,
    supplied: 'mp3',
  });
});

But it's telling me

jPlayer 2.1.0 : id='jquery_jplayer_1' : Error!

Attempt to issue media playback commands, while no media url is set.

Use setMedia() to set the media URL.

Context: play

And doesn't play the file

You check an online example here

Answer 1

The main point of jPlayer is so that you can use html5 with flash fallback, so you should leverage the html5 of FF and chrome, not depending on it falling back to flash.

Firefox doesn't support mp3 on html5, they support ogg, which is better anyway. I always format each audio file I need to play for each browser, that way you can leverage html5 when its available, and you give your app a much better chance at loading the audio file, with 3 for each browser to choose from (not all get loaded, just the one it needs).

Use: .ogg for Chrome and Firefox, .m4a for Safari, and .mp3 for IE. See here

Covert your audio files then try this:

function loadmedia(){
   $('#jquery_jplayer_1').jPlayer('setMedia', {
      oga: 'media/audio/04-Piste_4_1.ogg',
      m4a: 'media/audio/04-Piste_4_1.m4a',
      mp3: 'media/audio/04-Piste_4_1.mp3'
   });
}

$(document).ready(function () {
  $('#jquery_jplayer_1').jPlayer({
    ready: loadmedia,
    swfPath: 'static/jPlayer',
    errorAlerts: true,
    supplied: 'oga, m4a, mp3'//fyi, in your code you had a trailing comma here, that will break IE
  });
});

EDIT:

Saw this on the jPlayer site for the new audio demo: Link

Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution. However, the OGA format would be used in this case with the HTML solution.