Question

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 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>

Answer 1

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