Javascript 在div中播放所有音频

我有一个div.move，当点击按钮“go div”时，它开始从左向右移动

然后我有两个分区。声音在内容分区的中心，带有音频元素

我希望当div.move到达.sound div时，里面的音频.sound div开始播放

但如何说.move div何时到达.sound元素，sound div中的每个音频元素开始播放

jQuery：

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

检查每个动画步骤是否存在碰撞

添加代码以播放声音，我在其中添加了一个类以直观地显示这一点

注意：我将ID

条添加到移动的条中，因为在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;
 }

$（“#go”）。单击（函数（）{
var stop=$（“.stop”）.offset（）.left；
var obj=document.getElementById（“音频”）；
//如何说当.move div到达.sound元素时，与之关联的声音.sound div开始播放？
//obj.play（）；
$（“#条”）。设置动画({
不透明度：0.25，
左：停止-（$（“.stop”）.width（）+$（this.width（）），
}, {
持续时间：5000，
步骤：函数（）{
$（'.sound'）。每个（函数（）{
if（碰撞（$（此），$（'#条'））{
$（this.addClass（'playme'）；
}否则{
$（this.removeClass（'playme'）；
}
});
}，完成：函数（）{
$（this.css（'left'，0）；
$（this.css（'height'，'100%）；
}});
});
函数冲突（$div1，$div2）{
var x1=$div1.offset（）.left；
var r1=x1+$div1.width（）；
var x2=$div2.offset（）.left；
var r2=x2+$div2.width（）；
如果（r1r2）返回false；
返回true；
}

检查每个动画步骤是否存在碰撞

添加代码以播放声音，我在其中添加了一个类以直观地显示这一点

注意：我将ID
条添加到移动的条中，因为在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;
 }

$（“#go”）。单击（函数（）{
var stop=$（“.stop”）.offset（）.left；
var obj=document.getElementById（“音频”）；
//如何说当.move div到达.sound元素时，与之关联的声音.sound div开始播放？
//obj.play（）；
$（“#条”）。设置动画({
不透明度：0.25，
左：停止-（$（“.stop”）.width（）+$（this.width（）），
}, {
持续时间：5000，
步骤：函数（）{
$（'.sound'）。每个（函数（）{
if（碰撞（$（此），$（'#条'））{
$（this.addClass（'playme'）；
}否则{
$（this.removeClass（'playme'）；
}
});
}，完成：函数（）{
$（this.css（'left'，0）；
$（this.css（'height'，'100%）；
}});
});
函数冲突（$div1，$div2）{
var x1=$div1.offset（）.left；
var r1=x1+$div1.width（）；
var x2=$div2.offset（）.left；
var r2=x2+$div2.width（）；
如果（r1r2）返回false；
返回true；
}
用户知道您要播放音频吗？我会从用户体验的角度重新思考，如果最终结果是“惊喜”，那么在使用
.animate（）
时是否总是如此？因为这是使用jQuery的动画步骤回调和setInterval之间的区别。我想你会发现这个问题的答案很有帮助。这基本上与您遇到的问题相同，只是您希望在出现问题时播放声音：。另外，请注意，JSFIDLE不会播放正在加载的声音，因为它们是通过http提供的，JSFIDLE是https。谢谢您的帮助！我只知道制作动画的方法…用户知道你要播放音频吗？我会从用户体验的角度重新思考，如果最终结果是“惊喜”，那么在使用
.animate（）
时是否总是如此？因为这是使用jQuery的动画步骤回调和setInterval之间的区别。我想你会发现这个问题的答案很有帮助。这基本上与您遇到的问题相同，只是您希望在出现问题时播放声音：。另外，请注意，JSFIDLE不会播放正在加载的声音，因为它们是通过http提供的，JSFIDLE是https。谢谢您的帮助！我只知道动画的方法…我不明白为什么它不能同时播放，除非一个页面上只有一个音频可以同时播放我不明白为什么它不能同时播放，除非一个页面上只有一个音频可以同时播放