jPlayer not working with Safari

[Joshii Pucher]

Hello,

I've got another problem: jPlayer isn't playing the audio file with Safari, but with every other browser.
(I don't use the video player, so I don't know if the video player would work).

I've uploaded MP3 and OGG File.
Here's my code again (I've changed jQuery to $ but that's not a reason for the error):


<?php

$ogg_url = get_post_meta($post->ID, 'ogg_url', TRUE);
$mp3_url = get_post_meta($post->ID, 'mp3_url', TRUE);

?>
                   
<div id="toppicture">
   
    <script type="text/javascript">
    $ = jQuery.noConflict();
    $(document).ready(function(){
      $("#jquery-jplayer-<?php the_ID(); ?>").jPlayer({
        ready: function () {
          jQuery(this).jPlayer("setMedia", {
            oga: "<?php echo $ogg_url; ?>",
            mp3: "<?php echo $mp3_url; ?>"
          });
        },
        swfPath: "../js",
        supplied: "oga, mp3",
        wmode: "window",
        cssSelectorAncestor: "#jp-container-<?php the_ID(); ?>",
      })
      .bind($.jPlayer.event.play, function() { // Bind an event handler to the instance's play event.
        $(this).jPlayer("pauseOthers"); // pause all players except this one.
      });
    });
    </script>   

    <div id="jquery-jplayer-<?php the_ID(); ?>" class="jp-jplayer"></div>
    <div id="jp-container-<?php the_ID(); ?>" class="jp-gui">
        <div class="jp-type-single">
            <div class="jp-interface">
                <ul class="jp-controls">
                    <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                    <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                    <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
                    <li><a href="#" class="jp-unmute" tabindex="1">unmute</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-current-time"></div>
                <div class="jp-duration"></div>
            </div>
        </div>
    </div>   
   
</div> <!-- end Toppicture -->

[Joshii Pucher]

Do you have an idea?
Here's a test page:
http://demo.lovelessdesign.com/revealit/projects/portfolio-with-audio/

[Mark Panaghiston]

The problem is related to the one you had with Firefox. Your server has not enabled byte RANGE requests. As a result, your audio urls look like live-streams.

I found that OSX Safari played the audio once. Win Safari seemed to work fine, but win Safari does not enable RANGE requests and I it's think only web developers that ever use it on Windows.

So again... Correct your server and they will work. I'm not even sure how you managed to turn off range request support on your Apache server. It seems to be enabled by default on say Apache 2.

There is a bit on range requests at the bottom of this section:
http://jplayer.org/latest/developer-guide/#jPlayer-server-response