HTML5音频标签与JQuery音频

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $("#play-bt").click(function(){ 
        $(".audio-player")[0].play(); 
        $(".message").text("Music started"); 
       }) 

       $("#pause-bt").click(function(){ 
        $("#audio-player")[0].pause(); 
        $(".message").text("Music paused"); 
       }) 

       $("#stop-bt").click(function(){ 
        $(".audio-player")[0].pause(); 
        $(".audio-player")[0].currentTime = 0; 
        $(".message").text("Music Stopped"); 
       }) 
      }) 
     </script> 
    </head> 
    <body> 

     <audio class ="audio-player" name="" src="01-Breakin-A-Sweat-Zedd-Remix.mp3" ></audio> 
     <audio class ="audio-player" name="" src="04-zedd-stars_come_out_(terravita_remix)" ></audio> 

       <div class ="message"></div> 
      <a id = "play-bt" href="#">Play music</a> | <a id ="pause-bt" href="#">Pause music</a> | <a id ="stop-bt" href="#">Stop music</a> 

    </body> 
</html>

此代码只播放第一个音频标签，我将如何能够播放下一首歌曲/曲目/音频标签？HTML5音频标签与JQuery音频

来源

2012-07-26 user962206

您正在使用'$（“。audio-player”）[0]'获取第一个标签。你得到另一个有什么困难？ – 2012-07-26 15:00:35

哦，我看到这就是它的顺便说一句，我可以问问Jquery在哪里得到了这种方法？。玩（）; ？ – user962206 2012-07-26 15:10:22

这不是一个jQuery方法。这是一种本地DOM方法。 '[0]'从jQuery对象获取本地DOM元素。 – 2012-07-26 15:11:13

所有加载的音频元素都在一个数组中，您可以使用您拥有的方法访问该数组。如果添加下一曲功能，您可以通过所有元素浏览，就像这样：

$(document).ready(function(){ 

    var x = $(".audio-player").length; // Count total audio players 
    var z = 0; // Start at first audio player 

    $("#play-bt").click(function(){ 
     $(".audio-player")[z].play(); 
     $(".message").text("Music started"); 
    }) 
    $("#pause-bt").click(function(){ 
     $("#audio-player")[z].pause(); 
     $(".message").text("Music paused"); 
    }) 
    $("#stop-bt").click(function(){ 
     $(".audio-player")[z].pause(); 
     $(".audio-player")[z].currentTime = 0; 
     $(".message").text("Music Stopped"); 
    }) 
    $("#next-bt").click(function(){ 
     $(".audio-player")[z].pause(); 
     z++; 
     if (z >= x) z = 0; 
     $(".audio-player")[z].play(); 
     $(".message").text("Track: "+z); 
    }) 
})

它发现与jQuery。长度音频元素的量，而当你到达最后的轨道从第一个开始。下面是一个例子 - >http://jsfiddle.net/8GycB/46/

来源

2012-07-26 15:19:35 reekogi

音频元素实际上是在一个jQuery对象中（它伪装成一个数组）。 – 2012-07-26 15:20:41

对不起，一个对象 – reekogi 2012-07-26 15:21:50

HTML5音频标签与JQuery音频

回答

相关问题