Question

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

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

Answer 1

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

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

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

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

2 个答案: