audio onprogress in chrome not working

I am having a problem getting onprogress event for the audio tag working on chrome. it seems to work on fire fox.

http://www.scottandrew.com/pub/html5audioplayer/ works on chrome but there is no progress bar update. When I copy the code and change the src to a .wav file and run it on fire fox it works perfectly.

<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开发者_C百科 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>

Chrome doesn't fire the progress event when it has the media in cache, that might be your problem.

The progress event doesn't fire in Chrome for WAV files but it does for MP3.

There is a known timeupdate bug: http://code.google.com/p/chromium/issues/detail?id=25185.