通过jQuery一次播放和暂停一个HTML5音频元素

我在页面上有几个HTML5音频元素，并使用jQuery来播放和暂停它们。播放和暂停功能可以正常工作，但曲目可以同时播放。通过jQuery一次播放和暂停一个HTML5音频元素

如何重写此代码，以便一次只能播放一首歌曲？也就是说，如果某人正在玩并且您点击另一个人，请暂停前一个并播放最近的点击。

谢谢！

HTML：

<div id="music_right"> 
     <div class="thumbnail" id="paparazzi"> 
      <a class="playback"> 
       <img class="play" src="http://www.lucisz.com/imgs/play.png" /> 
      </a> 
      <audio> 
      <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" /> 
       <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" /> 
       Your browser does not support HTML5 audio. 
      </audio> 
     </div> 
     <div class="thumbnail" id="danceinthedark"> 
      <a class="playback"> 
       <img class="play" src="http://www.lucisz.com/imgs/play.png" /> 
      </a> 
      <audio> 
      <source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" /> 
       <source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" /> 
       Your browser does not support HTML5 audio. 
      </audio> 
     </div> 
     <div class="thumbnail" id="bornthisway"> 
      <a class="playback"> 
       <img class="play" src="http://www.lucisz.com/imgs/play.png" /> 
      </a> 
      <audio> 
      <source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" /> 
       <source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" /> 
       Your browser does not support HTML5 audio. 
      </audio> 
     </div> 
    </div>

的JavaScript：（这样的作品，但扮演/单独暂停）

$(function() { 
    $(".playback").click(function(e) { 
     e.preventDefault(); 
     var song = $(this).next('audio').get(0); 
     if (song.paused) 
      song.play(); 
     else 
      song.pause(); 
    }); 
});

JavaScript的：（我的丑概念）

$(function() { 
    $(".playback").click(function(e) { 
     e.preventDefault(); 
     var song = $(this).next('audio').get(0); 
     if (song.paused) 
      song.play(); 
      song.not($(this).pause(); 
     else 
      song.pause(); 
    }); 
});

来源

2011-04-19 technopeasant

你有什么尝试？......没有人会为你写。那么，大多数人，就是这样。 – mattsven 2011-04-19 19:52:18

@NeXXeuS。我听到你。用严格的语法试了几个不同的东西。如果/然后陈述对我来说很难包围我的头。我会将我的概念加入 – technopeasant 2011-04-19 20:00:21

var curPlaying; 

$(function() { 
    $(".playback").click(function(e) { 
     e.preventDefault(); 
     var song = $(this).next('audio')[0]; 
     if(curPlaying) { $("audio", "#"+curPlaying)[0].pause(); } 
     if(song.paused) { song.play(); } else { song.pause(); } 
     curPlaying = $(this).parent()[0].id; 
    }); 
});

这应该工作。

编辑：

var curPlaying; 

$(function() { 
    $(".playback").click(function(e) { 
     e.preventDefault(); 
     var song = $(this).next('audio')[0]; 
     if(song.paused){ 
      song.play(); 
      if(curPlaying) $("audio", "#"+curPlaying)[0].pause(); 
     } else { song.pause(); } 
     curPlaying = $(this).parent()[0].id; 
    }); 
});

来源

2011-04-19 19:58:24 mattsven

这个问题......我是一个伪君子...... – mattsven 2011-04-19 19:59:55

@NeXXeuS，我爱你。您的功能会在播放歌曲的同时完美地暂停其他有效歌曲，但如果再次单击该歌曲，则不会再暂停正在播放的歌曲。 – technopeasant 2011-04-19 20:08:36

我确实......不明白...... – mattsven 2011-04-19 20:30:39

这个小功能对我的作品。它会停止页面上播放的所有其他音频元素，并让已启动的元素继续播放。 Here是一个小提琴。

$("audio").on("play", function (me) { 
     jQuery('audio').each(function (i,e) { 
       if (e != me.currentTarget) 
       { 
        this.pause(); 
       } 
     }); 
});

来源

2014-02-07 15:01:23 Hagbourne

这对我的网站nallikayi.com完美的作品。这可以在JavaScript中完成吗？ – 2017-01-04 04:08:38

通过jQuery一次播放和暂停一个HTML5音频元素

回答

相关问题