オーディオオーディオファイルを一度に再生

Question

イメージが5つあり、それぞれが画像をクリックすると再生されるオーディオファイルがあります。

別の画像をクリックしてその画像の音声を再生すると、ある画像の再生中の音声を停止したい。

$('.cl').click(function() { 
    var DOMElem = $('.cs').get(0); 
    DOMElem.paused ? DOMElem.play() : DOMElem.pause(); 
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<img class="cl" src="photo/198.jpg" /> 
</br> 
<audio class="cs"> 
    <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> 
</audio> 
<img class="cl" src="photo/198.jpg" /> 
</br> 
<audio class="cs"> 
    <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> 
</audio> 
<img class="cl" src="photo/198.jpg" /> 
</br> 
<audio class="cs"> 
    <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> 
</audio> 

Answer 1

毎回最初にaudioオブジェクトが取得されています。あなたはより良いアプローチは、各画像と音声とするとき、あなたは、コンテナに対するオーディオオブジェクトを取得することができimageをクリックするために、コンテナのdivを作ることですimg

$('.cl').click(function() { 
    var DOMElem = $(this).next().next().get(0); 
    DOMElem.paused ? DOMElem.play() : DOMElem.pause(); 
}); 

に関してobjectを取得する必要があります。

<div class="audioContainer"> 
     <img class="cl" src="photo/198.jpg" /> 
     </br> 
     <audio class="cs"> 
      <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> 
     </audio> 
    </div> 
    <div class="audioContainer"> 
     <img class="cl" src="photo/198.jpg" /> 
     </br> 
     <audio class="cs"> 
      <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> 
     </audio> 
    </div> 
    <div class="audioContainer"> 
     <img class="cl" src="photo/198.jpg" /> 
     </br> 
     <audio class="cs"> 
      <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> 
     </audio> 
    </div> 
    <script> 

     var DOMElem; 
    $('.cl').click(function() { 
     if (DOMElem) { 
      if (!DOMElem.paused) 
       DOMElem.pause(); 
     } 
     DOMElem = $(this).parent().find('.cs').get(0); 
     DOMElem.play(); 
     console.log(DOMElem); 
    }); 
    </script>