2010-05-27 6 views
1

J'ai un problème pour obtenir l'événement onprogress pour la balise audio fonctionnant sur chrome. il semble fonctionner sur le renard de feu.audio en cours d'exécution en chrome ne fonctionne pas

http://www.scottandrew.com/pub/html5audioplayer/ fonctionne sur le chrome mais il n'y a pas de mise à jour de la barre de progression. Quand je copie le code et change le src dans un fichier .wav et l'exécute sur fire fox cela fonctionne parfaitement.

<style type="text/css"> 
    #content 
    { 
     clear:both; 
     width:60%; 
    } 
    .player_control 
    { 
     float:left; 
     margin-right:5px; 
      height: 20px; 
     } 
    #player 
    { 
     height:22px; 
    }  
    #duration 
    { 
     width:400px; 
     height:15px; 
     border: 2px solid #50b; 
    } 
    #duration_background 
    { 
     width:400px; 
     height:15px; 
     background-color:#ddd; 
    } 
    #duration_bar 
    { 
     width:0px; 
     height:13px; 
     background-color:#bbd; 
    } 
    #loader 
    { 
     width:0px; 
     height:2px;     
    } 
     .style1 
     { 
      height: 35px; 
     } 
    </style> 
    <script type="text/javascript">  
    var audio_duration; 
    var audio_player; 

    function pageLoaded() {   
     audio_player = $("#aplayer").get(0); 
     //get the duration 
     audio_duration = audio_player.duration;   
     $('#totalTime').text(formatTimeSeconds(audio_player.duration)); 
     //set the volume    
    }    

    function update(){ 
     //get the duration of the player 
     dur = audio_player.duration; 
     time = audio_player.currentTime; 
     fraction = time/dur; 
     percent = (fraction*100); 
     wrapper = document.getElementById("duration_background"); 
     new_width = wrapper.offsetWidth*fraction; 
     document.getElementById("duration_bar").style.width = new_width + "px"; 
     $('#currentTime').text(formatTimeSeconds(audio_player.currentTime)); 
     $('#totalTime').text(formatTimeSeconds(audio_player.duration)); 
    } 

    function formatTimeSeconds(time) { 
     var minutes = Math.floor(time/60); 
     var seconds = "0" + (Math.floor(time) - (minutes * 60)).toString(); 
     if (isNaN(minutes) || isNaN(seconds)) 
     { 
      return "0:00"; 
     } 
     var Strseconds = seconds.substr(seconds.length - 2); 
     return minutes + ":" + Strseconds; 
    } 

    function playClicked(element){ 
     //get the state of the player 
     if(audio_player.paused) 
     { 
      audio_player.play(); 
      newdisplay = "||"; 
     }else{ 
      audio_player.pause(); 
      newdisplay = ">"; 
     } 

     $('#totalTime').text(formatTimeSeconds(audio_player.duration)); 
     element.value = newdisplay;   
    } 

    function trackEnded(){ 
     //reset the playControl to 'play' 
     document.getElementById("playControl").value=">"; 
    } 

    function durationClicked(event){ 
     //get the position of the event 
     clientX = event.clientX; 
     left = event.currentTarget.offsetLeft; 
     clickoffset = clientX - left; 
     percent = clickoffset/event.currentTarget.offsetWidth; 
     duration_seek = percent*audio_duration; 
     document.getElementById("aplayer").currentTime=duration_seek; 

    } 

    function Progress(evt){ 
     $('#progress').val(Math.round(evt.loaded/evt.total * 100)); 
     var width = $('#duration_background').css('width')   
     $('#loader').css('width', evt.loaded/evt.total * width.replace("px","")); 
    } 

    function getPosition(name) { 
     var obj = document.getElementById(name); 
     var topValue = 0, leftValue = 0; 
     while (obj) { 
      leftValue += obj.offsetLeft; 
      obj = obj.offsetParent; 
     } 
     finalvalue = leftValue; 
     return finalvalue; 
    } 
    function SetValues() { 
     var xPos = xMousePos; 
     var divPos = getPosition("duration_background"); 
     var divWidth = xPos - divPos; 
     var Totalwidth = $('#duration_background').css('width').replace("px","") 
     audio_player.currentTime = divWidth/Totalwidth * audio_duration; 
     $('#duration_bar').css('width', divWidth);   
    } 

    </script> 
</head> 
    <script type="text/javascript" src="js/MousePosition.js" ></script> 
    <body onLoad="pageLoaded();"> 
     <table> 
      <tr> 
       <td valign="bottom"><input id="playButton" type="button" onClick="playClicked(this);" value=">"/></td> 
       <td colspan="2" class="style1" valign="bottom"> 
        <div id='player'> 
         <div id="duration" class='player_control' > 
          <div id="duration_background" onClick="SetValues();"> 
           <div id="loader" style="background-color: #00FF00; width: 0px;"></div> 
           <div id="duration_bar" class="duration_bar"></div> 
          </div> 
         </div> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
       </td> 
       <td> 
        <span id="currentTime">0:00</span> 
       </td> 
       <td align="right" > 
        <span id="totalTime">0:00</span> 
       </td> 
      </tr> 
     </table>    
     <audio id='aplayer' src='<%=getDownloadLink() %>' type="audio/ogg; codecs=vorbis" onProgress="Progress(event);" onTimeUpdate="update();" onEnded="trackEnded();" > 
     <b>Your browser does not support the <code>audio</code> element. </b> 
     </audio> 
    </body> 

Répondre

0

L'événement progress ne se déclenche pas dans Chrome pour les fichiers WAV, mais il le fait pour MP3.

1

Chrome ne déclenche pas l'événement de progression lorsque le média est en mémoire cache, cela pourrait être votre problème.

Questions connexes