JSFiddle - React, Tailwind, and code Playground

by popnoodles

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="content">
  <div class="sound">
    sound
    <audio id="audio" type="audio/mp3">
      <source src="http://www.freesfx.co.uk/rx2/mp3s/11/12828_1448266837.mp3">
    </audio>
  </div>
   <div class="sound">
    sound
    <audio id="audio" type="audio/mp3">
      <source src="http://www.freesfx.co.uk/rx2/mp3s/11/12828_1448266837.mp3">
    </audio>
  </div>
  

  <div class="stop">
    stop
  </div>
  <div class="move" id="bar">
  </div>
</div>

<button id="go">
  go div
</button>
<div id="result">
</div>

CSS

.content {
    width: 500px;
    height: 50px;
    margin: 10px;
    border: 10px solid green;
    background:brown;
    overflow-x:scroll;
    padding:10px;
    position: relative;
}

.stop{
  float:right;
  background:yellow;
}

.sound{
  float:left;
  background:orange;
  margin-left:100px;
}

.move{
  left:0;
  background:yellow;
  height:100%;
  width:10px;
  opacity:0.2;
position: absolute;
}

.sound.playme{
  background: white;
}

JavaScript

$( "#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(); 
  $( ".move" ).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;
 }