一次播放音频音频文件

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对象。你需要对于获取object到img

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

一种更好的方法是使每个图像和音频div容器，当你点击image可以相对于容器获取音频对象。

<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>