关于javascript：HTML5音频进度条的长度

HTML5 Audio progress bar length

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">

$(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);
})
})

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

<p><center>[wp_ad_camp_1]</center></p><p>Sorry your file doesn't support html5</p>
</audio>

</audio>

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



</body>
</html>

此代码运行正常。我在这里遇到的问题是进度栏。有些曲目无法完全填满进度条。例如，如果一条Rails只有2分钟长，则基本上不会完成进度容器。如果曲目超过6分钟，则进度条将超出播放器容器。

我的问题我该如何创建进度条，无论Rails持续多长时间将完全加载或完成进度条。假设我们对progressbar容器的长度有特定的宽度。

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