Audio synchronized interaction


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="audio/jquery-1.7.min.js"></script>

<style>
body{ width:500px; height:300px; border:1px solid; }
.aud{ width:50px; height:50px; background:#0066FF;}
</style>

<script type="text/javascript">
var sAudio;
var uagent = navigator.userAgent.toLowerCase();
var platformAgent = navigator.platform.toLowerCase();
window.onload = function() {
   gameAud.addEventListener('ended', audEnded, false);
}

function audioPlay(uagent, sAudio, eleAud, objAud){
 audFile = sAudio;
 if(navigator.platform == 'iPad'){
    $('#gameAud').attr({src:'audio/'+audFile+'.mp3',type:'audio/mp3'});
   loadAud(objAud);
 }else if(uagent.search('android') > -1 || uagent.search('android') > -1 || platformAgent.search('android')>-1 || platformAgent.search('linux')>-1){
  if($.browser.version>534){
    $('#gameAud').attr({src:'audio/'+audFile+'.mp3',type:'audio/mp3'});
   loadAudAndroid(objAud);
  }else{
   var audioNamePath='audio/'+audFile+'.mp3';
   var audioElement = document.getElementById('gameAud');
   audioElement.setAttribute('src',audioNamePath);
   audioElement.load()
   audioElement.addEventListener("load", function() {
    audioElement.play();
   }, true);
  }
 }else if(uagent.search('firefox') > -1){
    $('#gameAud').attr({src:'audio/'+audFile+'.ogg',type:'audio/ogg'});
   loadAud(objAud);
 }else{
     $('#gameAud').attr({src:'audio/'+audFile+'.mp3',type:'audio/mp3'});
   loadAud(objAud);
 }
}
function playAud(){
  gameAud.play();
}
function loadAud(){
 gameAud.load();
 gameAud.play();   
}
function loadAudAndroid(){
 gameAud.load();
}
function gameAudioStop(){
   gameAud.pause();
    $(this).attr({src : 'imgs/play.png'});
}
function audEnded(){
 alert('in end')
 gameAudioStop();
 $(".aud_play").attr({src : 'imgs/play.png'});
}
$('.aud').live('click',function(){
                                    sAudio = "s1";
                                    audioPlay(uagent, sAudio, "gameAud", gameAud);
});

</script>
</head>

<body>
 <audio id="gameAud" preload="preload" src="" autoplay="autoplay"></audio>
<div class="aud"></div>
</body>

</html>

No comments:

Post a Comment