2 
<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){

                var counter = 0;
                var numOfTracks = $(".audio-player").length;
                $("#play-bt").click(function(){
                    $(".audio-player")[counter].play();
                    $("#message").text("Music started");
                })

                $("#pause-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $("#message").text("Music paused");
                })

                $("#stop-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    $("#message").text("Music Stopped");
                })

                $("#next-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    counter++;


                    if(counter > numOfTracks - 1){
                        counter = 0 ;
                    }

                    $(".audio-player")[counter].play();
                    $("#message").text("Next Track started");
                })

                $("#prev-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    counter--;
                    $(".audio-player")[counter].play();
                    $("#message").text("Previous Track");
                })

                $(".audio-player").bind('timeupdate', function(){

                    //Gets the whole duration of the track.
                    //No idea kung saan ko ilalagay sa UI**IMPLEMENT LATER**
                    var track_length = $(".audio-player")[counter].duration;
                    var secs = $(".audio-player")[counter].currentTime;
                    var progress = (secs/track_length) * 100;

                    $('#progressbar').css({'width' : progress * 2});

                    //Will Use these later on production
                    //NOTE DO NOT DELETE
                    //Track Minutes
                    var tcMins = parseInt(secs/60);
                    //Track Seconds
                    var tcSecs = parseInt(secs - (tcMins * 60));

                    if (tcSecs < 10) { tcSecs = '0' + tcSecs; }

                    // Display the time. REMEMBER
                    $('#timecode').html(tcMins + ':' + tcSecs);
                })
            })
        </script>
            <style>

        /*Seperate this some time in the development*/

        #playerContainer{ 
            background-color: #A8A8A8  ; 
            width: 260px; 
            height: 55px;
            padding: 8px;
            border: 1px solid #d0d0d0;
        }
        /* Player Controls */

        /*list items of controls */

        #playerControls li { 
            display: block; 
            width: 32px; 
            height: 32px; 
            padding: 0px;
            float: left; 
            cursor: pointer;
        }

        #playerControls { list-style: none; padding: 0px; margin: 0px;}

        /*Images for each li items items */
        #play-bt { background: url('icons/glyphicons_173_play.png'); background-repeat:no-repeat }
        #pause-bt {background: url('icons/glyphicons_174_pause.png'); background-repeat:no-repeat;}
        #next-bt { background: url('icons/glyphicons_176_forward.png'); background-repeat:no-repeat}
        #prev-bt {background: url('icons/glyphicons_172_rewind.png'); background-repeat:no-repeat;}

        /*Progress Stuff*/


        /*Remember to manipulate its width via javascript later*/
        #progressContainer 
        { 
            background-color:#e0e0e0;
            height: 14px; 
            width: 256px; 
            float: left;
            margin-left: 0px;
        }

        #progressbar {background-color: #1384bb; height:14px; width:0%; }

            </style>
    </head>
<body>
            <audio class ="audio-player"  name= "audio-player" src="04-zedd-stars_come_out_(terravita_remix).ogg" >
                <p>Sorry your file doesn't support html5</p>
            </audio>
            <!--Second Track For Testing Purposes-->
            <audio  class ="audio-player" name= "audio-player" src="01-hard_rock_sofa-quasar.mp3" ></audio>

            <div id="message"></div>
                <div id = "playerContainer">

                    <ul id =  "playerControls" >
                        <li id = "prev-bt"></li>
                        <li id= "play-bt"></li>
                        <li id= "pause-bt"></li> 
                        <li id = "next-bt"></li>
                        <li id= "stop-bt" ></li>
                        <li><span id ="timecode"></span></li>

                    </ul>
                        <div id="progressContainer"><!-- Progess bars container //-->
                            <div id="progressbar"></div>
                        </div>
                </div>

            </div>



    </body>
</html>

这段代码工作得很好。我在这里遇到的问题是进度条。有些曲目没有完全填满进度条。例如，如果轨道只有 2 分钟长，它基本上不会完成进度容器。如果曲目超过 6 分钟，则进度条超出播放器容器。

我的问题如何创建一个进度条，无论曲目的持续时间有多长，它都会完全加载或完成进度条。假设我们对进度条容器的长度有一个特定的宽度。

这是 jsfiddle http://jsfiddle.net/vUpeC/中的代码

4

1 回答 1

5

假设持续时间属性正常运行，我认为您不需要将“进度”乘以 2。

这个

 $('#progressbar').css({'width' : progress * 2});

应该

 $('#progressbar').css({'width' : progress+'%' });
于 2012-07-31T15:31:02.773 回答