jQuery jQuery Sound (Buzz) not working in Safari

jerrell · 12-15-2011, 09:40 PM

Originally the script below was working in Safari however after Apple released Safari Version 5.1.2 (7534.52.7) the script stop working. I've test in Chrome, FireFox, Opera, IE9 it works. First time I've ever had an issues like this with Safari. Any suggestions on a solution to this problem is welcome and very appreciated.

jQuery code:

Code:

$( function() {
    var $volume = $( '#volume' );

    // Buzz audio library

    buzz.defaults.formats = [ 'ogg', 'mp3','wav','acc' ];

    var Sound = new buzz.sound( 'sounds/music' );
        

    if ( !buzz.isSupported() ) {
        $volume.hide();    
    }
    
    Sound.loop().play().fadeIn( 5000 );

    
    // Volume button

    $volume.click( function() {
        if ( $( this ).hasClass( 'all' ) ) {
             Sound.mute();
         
            $( this ).removeClass( 'all' ).addClass( 'none' );
        } else if ( $( this ).hasClass( 'none' ) ) {
           
            Sound.unmute();
        
            $( this ).removeClass( 'none' ).addClass( 'all' );
        }
        return false;
    });

});

HTML code:

Code:

<!DOCTYPE HTML>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Mitchell College Holiday Card 2011</title>

<!--main css -->
<link rel="stylesheet" type="text/css" href="css/styles.css">

<!-- for audio  -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="js/buzz/buzz.js"></script>
<script src="js/gallery.js"></script> 

<!-- for slideshow animation -->
<script src="js/slideshow.js"></script>

</head>

<body>
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
  
<!-- bye bye IE6 -->
<!--[if lt IE 7]> <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;'> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div> <![endif]-->

	<div class="wrapper">
	 <!--<button id="replay"> Replay </button>-->
	 <div class="slideshow">
	 	 	
		<img id="sImage" src="slideshow.jpg" alt="slideshow" rel="slideshow" />	
			
   
       <div id="volume" class="all" alt="volume button"><a href="#">Sounds</a><span class="volume">On/Off</span></div><!--volume -->
       
	   </div><!-- slideshow-->
	   
	   		<a class="url" alt="#" target="_blank">Click Here to View the 2010-2011</a><span class="url">Honor Roll of Donors</span> 


	 <button id="replay" alt="replay button"> Replay </button><span class="replay">Play Again?</span>
    </div>  <!--wrapper-->
</body>
</html>