Geek asks and answers

Jplayer sound does not work in firefox, opera and IE, but works in Chrome

http://www.jplayer.org/support/ - here is jplayer suppost (scroll down to see where jplayer doesn't 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 if the jplayer audio player works in Chrome, it does not work on IE, firfox and Opera. What is my question is that the problem mentioned in the FAQ is that src for .swfPath is wrong?

Full directory for the SWF file: helios.hud.ac.uk/u0867587/Mobile_app/jquery/Jplayer.swf

Appendix previewaudio.php-helios.hud.ac.uk/u0867587/Mobile_app/previewaudio.php

jquery:

<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 get this in firebug: HTTP “Content-Type” from “audio / mpeg” is not supported. What does this mean?

Here is the audio link: 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>
+5
1

Audio :

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

swfPath . solution

, :

<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 Goodbye excerpt_4.m4a",
        oga: "http://helios.hud.ac.uk/u0867587/Mobile_app/AudioFiles/AudioFiles/Thorne, Grandma Goodbye excerpt_4.m4a"
      });
    },
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "m4a, oga"
  });
}); 
</script>

.

UPDATE: (mp3, m4a, oga) . , .

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>

:

<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

, php-, :

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

:

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

More articles:


All Articles