JQuery和HTML5音頻進度欄不起作用

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

一切正常。代碼確實做了它所需要的，但顯然進度條不起作用，並顯示爲什麼？我檢查了我的控制檯，但沒有顯示任何錯誤。如何顯示當前正在播放的歌曲的進度條？JQuery和HTML5音頻進度欄不起作用

來源

2012-07-27 user962206

-1

您可以添加控件屬性。 like

<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 only support ogg。

來源

2012-07-27 01:29:51 princehaku

請勿爲進度條和容器使用內聯元素。嘗試使用div而不是跨度，並給它一些額外的樣式，以便您可以看到它（例如，背景顏色和尺寸）。進度條的寬度計算應該是一個不是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>

來源

2012-07-27 16:57:11

或讓別人爲你做所有的辛苦工作。 [jPlayer]（http://jplayer.org/） – 2012-07-27 17:04:56

如何提供閃回回退？ – user962206 2012-07-27 23:37:26

[jPlayer]（http://jplayer.org/latest/demo-01-solution-flash-html/） – 2012-07-28 00:36:01

JQuery和HTML5音頻進度欄不起作用

回答

相關問題