HTML5音频进度条长度

<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分钟，则进度条将出现在播放器容器外部。HTML5音频进度条长度

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

下面是的jsfiddle http://jsfiddle.net/vUpeC/

来源

2012-07-31 user962206

你可以发布一个JSFiddle与上面的代码？将会更容易看到它做什么！ – 2012-07-31 15:28:09

我刚刚更新了我的问题，请检查它在jsfiddle – user962206 2012-07-31 15:34:04

假设持续时间属性是正常的代码，我觉得你并不需要通过2

这

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

乘“进步”应该是

$('#progressbar').css({'width' : progress+'%' });

来源

2012-07-31 15:31:02

进度栏确实工作正常。但是当我拼接到％时，进度条与容器重叠 – user962206 2012-07-31 15:34:53

您是否尝试将“进度”记录到控制台以查看它设置的值？你试着拿出'* 2'部分，对吧？ – 2012-07-31 15:43:40

感谢它终于奏效！控制台中实际存在错误。谢谢！ – user962206 2012-08-01 03:14:53

HTML5音频进度条长度

回答

相关问题