JQuery 和 HTML5 音频进度条不起作用答案

【问题标题】：JQuery and HTML5 audio progress bar not workingJQuery 和 HTML5 音频进度条不起作用
【发布时间】：2012-07-27 01:01:34
【问题描述】：

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

一切正常。代码确实做了它需要的事情，但显然进度条不起作用并显示为什么会这样？我检查了我的控制台，但没有显示任何错误。如何显示当前正在播放的歌曲的进度条？

【问题讨论】：

标签： javascript jquery html audio

【解决方案1】：

不要在进度条和容器中使用内联元素。尝试使用 div 而不是 span，并给它一些额外的样式以便您可以看到它（例如，背景颜色和尺寸）。您对进度条的宽度计算应该是百分比而不是 px。

另外，我建议只使用单个音频元素并使用 jQuery 更新源，而不是让多个音频元素绑定多个处理程序。 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>

【讨论】：

或者让其他人为您完成所有艰苦的工作。 jPlayer
如何提供闪退？
我需要创建一个不使用任何 Jquery 插件的播放器：

【解决方案2】：

您可以添加控件属性。喜欢

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

【讨论】：