播放div中的所有音頻

當按鈕「go div」被點擊時，我有一個div .move開始從左向右移動。播放div中的所有音頻

然後我有兩個div .sound在音頻元素的內容div的中心。

我希望當div .move到達.sound div時，音頻內部的.sound div開始播放。

但是每當.move div到達.sound元素時，如何說.sound div中的每個音頻元素都開始播放？

的jQuery：

$("#div").click(function() {

來源

2015-12-14 user5674491

用戶是否知道您要播放音頻？如果最終結果是「驚喜！」，我會從用戶體驗的角度來思考。 – Phix

這會一直使用'.animate（）'嗎？因爲這是使用jQuery的Animate Step回調和setInterval之間的區別。 – Popnoodles

我想你會發現這個問題的答案有幫助。這基本上與你有同樣的問題，除非你想在發生時播放聲音：http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection。另外，只是提醒說jsfiddle不會播放正在加載的聲音，因爲它們通過http服務並且jsfiddle是https。 –

https://jsfiddle.net/popnoodles/dda5z70r/5/

檢查碰撞動畫每一步。

添加你的代碼來播放聲音，我添加了一個類來顯示這個視覺效果。

注意：我將ID bar添加到移動的條上，因爲搜索DOM的ID比類更快。如果你有多個移動條，我可以改變它。

$("#go").click(function() { 
    var stop = $(".stop").offset().left; 
    var obj = document.getElementById("audio"); 

    // how to say whenever .move div arrives at .sound element, the sound associated to that .sound div starts to play? 
    //obj.play(); 
    $("#bar").animate({ 
    opacity: 0.25, 
    left: stop-($(".stop").width()+$(this).width()), 
    }, { 
    duration: 5000, 
    step: function(){ 
     $('.sound').each(function(){ 
      if (collision($(this), $('#bar'))){ 
      $(this).addClass('playme'); 
     } else{ 
      $(this).removeClass('playme'); 
     } 
      }); 

    }, complete: function() { 
    $(this).css('left',0); 
    $(this).css('height','100%'); 

    }}); 


}); 

function collision($div1, $div2) { 
     var x1 = $div1.offset().left; 
     var r1 = x1 + $div1.width(); 
     var x2 = $div2.offset().left; 
     var r2 = x2 + $div2.width(); 
     if (r1 < x2 || x1 > r2) return false; 
     return true; 
}

來源

2015-12-14 02:27:32 Popnoodles

我不明白爲什麼它不應該同時播放，除非一次只有一個音頻可以播放 – Popnoodles

播放div中的所有音頻

回答

相關問題