Jplayer audio not working in firefox, opera and IE but works in Chrome

Question

http://www.jplayer.org/support/ - Here is jplayer suppost (scroll down to see where jplayer does not work in IE 6,7,8, firefox and opera

Setting up jplayer audio javascript: http://www.jplayer.org/latest/quick-start-guide/step-7-audio/

Now the problem is that even though the jplayer audio player works on Chrome, it does not work on IE, firfox and Opera. What my question is that is the problem as mentioned in the FAQ that the src for .swfPath is incorrect?

The full directory for the swf file is helios.hud.ac.uk/u0867587/Mobile_app/jquery/Jplayer.swf

The application previewaudio.php ishelios.hud.ac.uk/u0867587/Mobile_app/previewaudio.php

The jquery is:

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        m4a: "<?php echo $dbAudioFile; ?>",
        oga: "<?php echo $dbAudioFile; ?>"
      });
    },
    swfPath: "jquery/",
    supplied: "m4a, oga"
  });
}); 
</script>

I am getting this in firebug: HTTP "Content-Type" of "audio/mpeg" is not supported." What does this mean?

Here is a link to the audio:AUDIO

UPDATE:

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Preview Audio</title>
    <link type="text/css" href="jquery/skin/jplayer.blue.monday.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>   
    <script type="text/javascript" src="jquery/jquery.jplayer.min.js"></script>
</head>

<body>


<?php

$getaudio = 'AudioFiles/' . $_GET['filename'];

$audioquery = "SELECT AudioFile FROM Audio WHERE (AudioFile = ?)";

        if (!$audiostmt = $mysqli->prepare($audioquery)) {
        // Handle errors with prepare operation here
}


// Bind parameter for statement
$audiostmt->bind_param("s", $getaudio);

// Execute the statement
$audiostmt->execute();

            if ($audiostmt->errno) 
            {
                // Handle query error here
            }

$audiostmt->bind_result($dbAudioFile); 

$audiostmt->fetch(); 

$audiostmt->close(); 

?>

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        m4a: "<?php echo "http://helios.hud.ac.uk/u0867587/Mobile_app/".$dbAudioFile; ?>",
        mp3: "<?php echo "http://helios.hud.ac.uk/u0867587/Mobile_app/".$dbAudioFile; ?>",
        oga: "<?php echo "http://helios.hud.ac.uk/u0867587/Mobile_app/".$dbAudioFile; ?>"
      });
    },
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "m4a, mp3, oga"
  });
}); 
</script>
<?php echo "File Path " . $dbAudioFile; ?>
  <div id="jquery_jplayer_1" class="jp-jplayer"></div>
  <div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div class="jp-gui jp-interface">
        <ul class="jp-controls">
          <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
          <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
          <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
          <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
        <div class="jp-time-holder">
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <ul class="jp-toggles">
            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</body>

I just went to that page & it played the video. 100% no problem. http://i47.tinypic.com/35bh93a.png — Giacomo1968, Jan 28 '13 at 03:52
Sounds like you might have a problem with your browser or system. Check on another machine if possible. Good luck! — Giacomo1968, Jan 28 '13 at 04:06
Question changed slightly, instead of new question I changed it still regarding with jplayer. So above comments are redundant to this question — user1881090, Jan 30 '13 at 05:28
@eicto Yes it works in google chrome. But not in firefox 18.0.1, IE 9 and Opera 11.64. In the first link it mentions what to do if it is not working in IE, FIrefox and Opera and it states that probably swfpath is incorrect but I am unsure if mine is correct — user1881090, Jan 30 '13 at 05:50

KennyPowers · Accepted Answer · 2013-01-30T08:34:09.893

4

I have found a few problems here Audio This is your code:

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        mp3: "AudioFiles/Thorne, Grandma's Goodbye excerpt_4.m4a",
        oga: "AudioFiles/Thorne, Grandma's Goodbye excerpt_4.m4a"
      });
    },
    swfPath: "/jquery",
    supplied: "mp3, oga"
  });
}); 
</script>

You need to change swfPath to the right one. Also you need to set the solution

Please try this code:

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        m4a: "http://helios.hud.ac.uk/u0867587/Mobile_app/AudioFiles/AudioFiles/Thorne, Grandma's Goodbye excerpt_4.m4a",
        oga: "http://helios.hud.ac.uk/u0867587/Mobile_app/AudioFiles/AudioFiles/Thorne, Grandma's Goodbye excerpt_4.m4a"
      });
    },
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "m4a, oga"
  });
}); 
</script>

This should help.

UPDATE: Now you're providing all formats (mp3, m4a, oga) with the same file. This is wrong, you need to define the right supplier and the source for each format.

mp3:

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        mp3: "http://path/to/file.mp3"
      });
    },
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "mp3"
  });
}); 
</script>

m4a:

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        m4a: "http://path/to/file.m4a"
      });
    },
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "m4a"
  });
}); 
</script>

oga:

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        oga: "http://path/to/file.oga"
      });
    },
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "oga"
  });
}); 
</script>

mp3, m4a, oga

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        mp3: "http://path/to/file.mp3"
        m4a: "http://path/to/file.m4a"
        oga: "http://path/to/file.oga"
      });
    },
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "mp3, m4a, oga"
  });
}); 
</script>

Update2

So back to your php code, change this:

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        m4a: "<?php echo "http://helios.hud.ac.uk/u0867587/Mobile_app/".$dbAudioFile; ?>",
        mp3: "<?php echo "http://helios.hud.ac.uk/u0867587/Mobile_app/".$dbAudioFile; ?>",
        oga: "<?php echo "http://helios.hud.ac.uk/u0867587/Mobile_app/".$dbAudioFile; ?>"
      });
    },
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "m4a, mp3, oga"
  });
});

change it to:

<?php
    $file_info = pathinfo($dbAudioFile);
    $ext = $file_info['extension'];
?>

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        <?php echo $ext;?>: "<?php echo "http://helios.hud.ac.uk/u0867587/Mobile_app/".$dbAudioFile; ?>"
      });
    },
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "<?php echo $ext;?>"
  });
});

edited Jan 30 '13 at 08:34

answered Jan 30 '13 at 07:01

KennyPowers

4,925
8
36
51

i've changed my answer a litte, I didn't noticed that you were providing m4a as mp3. I'm not sure that it will work, so better to change it as in my example above. – KennyPowers Jan 30 '13 at 07:18
Hi, What is happening is that if I change the code to your solution, if the the format is mp3 and oga, then the mp3 audio file plays while the m4a file doesn't play, it loads but doesn't play. if I change it from mp3 to m4a, then it gives me network error for any audio file I try to play: `"NetworkError: 404 Not Found - http://helios.hud.ac.uk/u0867587/Mobile_app/jquery/AudioFiles/Thorne,%20Grandma%27s%20Goodbye%20excerpt_4.m4a"`. Please test the audio file, at moment it is on mp3, oga – user1881090 Jan 30 '13 at 07:18
Am I better off picking m4a or mp3 or shall I pick both even though its really states mp3 or m4a? – user1881090 Jan 30 '13 at 07:19
What is strange btw is that is the directory the url is showing in the network error, because there should be no `jquery` folder as `AudioFiles` is not in `jquery` folder, it is simply in the `Mobile_app` folder as like the `jquery` folder is in the `Mobile_app` folder – user1881090 Jan 30 '13 at 07:25
can you change mp3 to m4a so I can check this? – KennyPowers Jan 30 '13 at 07:26
ok thanks, I see what's wrong. Just leave m4a but you must use absolute path for the audio sources if possible. So change `m4a: "AudioFiles/Thorne, Grandma's Goodbye excerpt_4.m4a"` to `m4a: "http://helios.hud.ac.uk/u0867587/Mobile_app/AudioFiles/Thorne, Grandma's Goodbye excerpt_4.m4a"` and same for .oga. Hope it helps. – KennyPowers Jan 30 '13 at 07:30
Ok it works in firefox when I checked and I will check in other browsers but it only worked for the m4a file `Grandmas's...`, When I play the `Kalimba.mp3` file which used to work, well now it does not work, it does not play. – user1881090 Jan 30 '13 at 07:41
you need to specify mp3 source and add 'mp3' to `supplied` – KennyPowers Jan 30 '13 at 07:42
It is strange why in documentation it states either m4a or mp3. Im sure I tried to specify mp3 as well and it gave me an error but I will have another go and let you know – user1881090 Jan 30 '13 at 07:44
I will produce an update showing full code but when I also add mp3, the mp3 file does not load in the player and gives me error: `TypeError: non-native scope object` – user1881090 Jan 30 '13 at 07:46
Is that possible to provide only mp3 supplier and source if mp3 file should be played? Same for oga and m4a – KennyPowers Jan 30 '13 at 07:56
If I remove m4a and just keep it to mp3 and oga, then audio will load but not play in firefox for m4a file, it only works for mp3 file. It is just how do we get both files to work – user1881090 Jan 30 '13 at 08:03
It works fine in FF for me now. When only mp3 and oga are provided. http://clip2net.com/clip/m13398/1359533398-clip-18kb.jpg and I head the music – KennyPowers Jan 30 '13 at 08:09
It is the m4a file which is failing. The Kalimba.mp3 file is fine, but the m4a file of `Grandma's Goodbye excerpt_4.m4a` is failing when putting all 3 formats in at once in the jquery code. It loads up 5 secs then stops, nothing played – user1881090 Jan 30 '13 at 08:17
don't put all of them. That's what I'm talking. – KennyPowers Jan 30 '13 at 08:21
Well how do I get it to know the correct supplier for the file. Do I put them in separatly? if so am I allowed multiple document.ready() functions? can you show what code looks like for sorting out file format separatly in one code snippet? – user1881090 Jan 30 '13 at 08:24
you have `$dbAudioFile`, you can check it's extension. `$info = pathinfo($dbAudioFile); print $info['extension'];` – KennyPowers Jan 30 '13 at 08:26
I have updated by reply. I have provided all possible ways how to play mp3, m4a, oga formats using your code snippet. Please review my comments and my answer before asking another and if you have further questions just think a little bit before asking :) – KennyPowers Jan 30 '13 at 08:36
Perfect, Great comment, put this as your answer and this will help other people when using jplayer. Thank you :) – user1881090 Jan 30 '13 at 08:37
Just realised you did put it as an answer, haha, it will let me award you bounty in 20 hours. Thanks and good night :) – user1881090 Jan 30 '13 at 08:38

Jplayer audio not working in firefox, opera and IE but works in Chrome

1 Answers1