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

Question 1

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

javascript jquery audio jplayer

user1881090 · Jan 28, 2013 · Viewed 8.3k times · Source

Answer

Answer

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;?>"
  });
});

Question 2

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>

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

Answer

Related questions