Javascript JQUERY媒体播放器持续时间问题

Question

所以，我一直在研究不使用Flash的mp3播放器，只有JS，HTML和CSS。我拿了一些开源代码并且一直在玩它，但是当我开始使用JSONP从另一个网站获取MP3文件的“链接”时，我不得不编辑它。我有问题在HTML中的任何JS函数调用工作，所以我使用JQUERY绑定并修复了持续时间函数和clientx问题。 link = foo.mp3

function writePlayer(link){

         $('<div id=\"main\"><h2>Episode</h2><div id=\"player\"><input id=\"playButton\" class=\'player_control\' type=\"button\" onClick=\"playClicked(this);\" value=\">\"><div id=\"duration\" class=\'player_control\' ><div id=\"duration_background\"  onClick=\"durationClicked(event);\"><div id=\"duration_bar\" class=\'duration_bar\'></div></div></div><div id=\"volume_control\" class=\'player_control\' onClick=\"volumeChangeClicked(event);\"><div id=\"volume_background\"><div id=\"volume_bar\"></div></div></div><input type=\"button\" class=\'player_control\'  id=\"volume_button\" onClick=\"volumeClicked();\" value=\"Vol\"></div><audio id=\"aplayer\" src='+ link +'  type=\"audio/mp3\"  onTimeUpdate=\"update();\" onEnded=\"trackEnded();\"><b>Your browser does not support the <code>audio</code> element. </b></audio><div id=\"msg\" class=\'output\'></div><div id=\"content\"><p></p></div></div></div>').appendTo('body');
$(document).ready(pageLoaded)
$("#playButton").bind('click',playClicked(this))
$("#duration_background").bind('click',durationClicked(event))
$("#volume_control").bind('click',volumeChangeClicked(event))
$("#volume_button").bind('click',volumeClicked(event))
$("#aplayer").bind('timeUpdate',update())
$("#aplayer").bind('ended',trackEnded())

         };


    var audio_duration;
    var audio_player; 
    var volume_button; 
    var volume_control;



    function pageLoaded()
    {

        audio_player = document.getElementById("aplayer");
        alert(audio_player);
        volume_button = document.getElementById('volume_button');
        volume_control = document.getElementById('volume_control');
        //get the duration
        audio_duration = audio_player.duration;
        //set the volume
        set_volume(0.7);
    }
    function set_volume(new_volume)
    {
        audio_player.volume = new_volume;
        update_volume_bar();
        volume_button.value = "Volume: "+parseInt(new_volume*100);

    }
    function update_volume_bar()
    {

        new_top = volume_button.offsetHeight  - volume_control.offsetHeight;
        volume_control.style.top = new_top+"px";
        volume = audio_player.volume;
        //change the size of the volume  bar
        wrapper = document.getElementById("volume_background");
        wrapper_height = wrapper.offsetHeight;
        wrapper_top = wrapper.offsetTop;
        new_height= wrapper_height*volume;
        volume_bar = document.getElementById("volume_bar");
        volume_bar.style.height=new_height+"px";
        new_top =  wrapper_top + (  wrapper_height - new_height  );
        volume_bar.style.top=new_top+"px";
    }

    function update(audio_player)
    {
        //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";

    }
    function playClicked(element)
    {
        //get the state of the player
        if(audio_player.paused)
        {
            audio_player.play();
            newdisplay = "| |";
        }else{
            audio_player.pause();
            newdisplay = ">";
        }
        element.value=newdisplay;
    }
    function trackEnded()
    {
        //reset the playControl to 'play'
        document.getElementById("playButton").value=">";
    }
    function volumeClicked(event)
    {
        control = document.getElementById('volume_control');

        if(control.style.display=="block")
        {
            control.style.display="None";
        }else{
            control.style.display="Block";
            update_volume_bar();
        }
    }

    function volumeChangeClicked(event)
    {
        //get the position of the event
        clientY = event.clientY;
        offset =  event.currentTarget.offsetTop + event.currentTarget.offsetHeight  - clientY;
        volume = offset/event.currentTarget.offsetHeight;
        set_volume(volume);
        update_volume_bar();
    }

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

</script>    

非常感谢你的帮助！