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

すべてがうまく機能します。コードは必要なことを行いますが、明らかに進行状況バーが機能しておらず、その理由を示していますか? コンソールを確認しましたが、エラーは表示されません。現在再生中の曲の進行状況バーを表示するにはどうすればよいですか?

4

2 に答える 2

0

プログレス バーとコンテナーにインライン要素を使用しないでください。スパンの代わりに div を使用してみて、いくつか追加のスタイルを指定して、それが見えるようにします (例: 背景色と寸法)。プログレス バーの幅の計算は、px 単位ではないパーセンテージである必要があります。

また、複数のオーディオ要素に複数のハンドラーをバインドするのではなく、単一のオーディオ要素を使用して jQuery を使用してソースを更新することをお勧めします。 javascript の HTML5 設定オーディオ ソースが機能しない

これは 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>
于 2012-07-27T16:57:11.323 に答える
-1

コントロール属性を追加できます。お気に入り

<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 のみをサポートします。

于 2012-07-27T01:29:51.623 に答える