一次播放音頻音頻文件

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>