JQuery和HTML5音频进度条不工作
JQuery和HTML5音频进度条不工作
提问于 2012-07-27 09:01:35
<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;
$("#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++;
$(".audio-player")[counter].play();
$("#message").text("Music started");
})
$("#prev-bt").click(function(){
$(".audio-player")[counter].pause();
$(".audio-player")[counter].currentTime = 0;
counter--;
$(".audio-player")[counter].play();
$("#message").text("Music started");
})
$(".audio-player").bind('timeupdate', function(){
var track_length = $(".audio-player")[counter].duration;
var secs = $(".audio-player")[counter].currentTime;
var progress = (secs/track_length) * 100;
$('#progress').css({'width' : progress * 2});
var tcMins = parseInt(secs/60);
var tcSecs = parseInt(secs - (tcMins * 60));
if (tcSecs < 10) { tcSecs = '0' + tcSecs; }
// Display the time
$('#timecode').html(tcMins + ':' + tcSecs);
})
})
</script>
<style>
</style>
</head>
<body>
<div class = "div.jp-audio"><audio class ="audio-player" name= "audio-player" src="01-Breakin-A-Sweat-Zedd-Remix.mp3" ></audio></div>
<div class = "div.jp-audio"><audio class ="audio-player" name= "audio-player" src="01-hard_rock_sofa-quasar.mp3" ></audio></div>
<div id="message"></div>
<div id = "playerContainer">
<ul id = "playerControls">
<li><a id="play-bt" href="#">Play music</a></li> <li> <a id="pause-bt" href="#">Pause music</a></li>
<li><a id="stop-bt" href="#">Stop music</a></li> <li><a id = "next-bt" href ="#">Next Track</a></li>
<li><a id = "prev-bt" href ="#">Previous Track</a></li>
</ul>
<span id="timecode"></span>
<span id="progressContainer">
<span id="timecode"></span>
<span id="progress"></span>
</span>
</div>
</body>
</html>一切都运行得很好。代码确实做了所需的事情，但显然进度条没有工作，并显示了原因？我检查了我的控制台，但它没有显示任何错误。如何显示当前正在播放的歌曲的进度条？
回答 2
Stack Overflow用户
发布于 2012-07-28 00:57:11
不要在进度条和容器中使用内联元素。尝试使用div而不是span，并给它一些额外的样式，这样你就可以看到它(例如，背景颜色和尺寸)。进度条的宽度计算应该是百分比，而不是px。
HTML5 setting audio source in javascript not working
这只适用于Chrome，如果你想让它在Firefox中运行，你需要添加ogg文件。
<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js "></script>
<script>
$(document).ready(function(){
var counter = 0;
$("#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++;
$(".audio-player")[counter].play();
$("#message").text("Music started");
})
$("#prev-bt").click(function(){
$(".audio-player")[counter].pause();
$(".audio-player")[counter].currentTime = 0;
counter--;
$(".audio-player")[counter].play();
$("#message").text("Music started");
})
$(".audio-player").bind('timeupdate', function(){
var track_length = $(".audio-player")[counter].duration;
var secs = $(".audio-player")[counter].currentTime;
var progress = (secs/track_length) * 100;
$('#progress').css({'width' : progress + "%"});
var tcMins = parseInt(secs/60);
var tcSecs = parseInt(secs - (tcMins * 60));
if (tcSecs < 10) { tcSecs = '0' + tcSecs; }
// Display the time
$('#timecode').html(tcMins + ':' + tcSecs);
})
})
</script>
</head>
<body>
<div class = "jp-audio"><audio class ="audio-player" name= "audio-player" src="01-Breakin-A-Sweat-Zedd-Remix.mp3" ></audio></div>
<div class = "jp-audio"><audio class ="audio-player" name= "audio-player" src="01-hard_rock_sofa-quasar.mp3" ></audio></div>
<div id="message"></div>
<div id = "playerContainer">
<ul id = "playerControls">
<li><a id="play-bt" href="#">Play music</a></li> <li> <a id="pause-bt" href="#">Pause music</a></li>
<li><a id="stop-bt" href="#">Stop music</a></li> <li><a id = "next-bt" href ="#">Next Track</a></li>
<li><a id = "prev-bt" href ="#">Previous Track</a></li>
</ul>
<div id="progressContainer" style="width: 250px;">
<div id="timecode"></div>
<div id="progress" style="height: 10px; background-color: red; width: 0%;"></div>
</div>
</div>
</body>
</html>Stack Overflow用户
发布于 2012-07-27 09:29:52
您可以添加控件属性。喜欢
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>ps firefox只支持ogg。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11680149
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号