how to get audio on clickeing the image using javascript and pause when playing two or more images one must pasued while other is playing

Question

    <img  class="cl"src="photo/198.jpg"/></br>
    <audio class="cs" controls>
       <source src="audio/198 banu nagamothu.mp3" type="audio/mpeg">
    </audio>

I dont want controls to audio first but when i clicked the image audio should played using javascript and html

score 0 · Answer 1 · answered Nov 17 '16 at 05:30

0

Try below code

$('.cl').click(function() {
  if ($('.cs').paused == false) {
      $('.cs').pause();
      alert('pause');
  } else {
      $('.cs').play();
      alert('play');
  }
});

answered Nov 17 '16 at 05:30

Chetan Panchal

393
2
10

`paused` is not a property of `jQuery` object... – Rayon Nov 17 '16 at 05:32

Rayon · Accepted Answer · 2016-11-17T06:52:35.583

0

Use AudioElement.paused property!

$('.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>

edited Nov 17 '16 at 06:52

answered Nov 17 '16 at 05:38

Rayon

36,219
4
49
76

@banuprakash — What is not working ? What is the error ? – Rayon Nov 17 '16 at 06:23
@banuprakash — Check the update.... – Rayon Nov 17 '16 at 06:36
@banuprakash — Just remove `controls` attribute... – Rayon Nov 17 '16 at 06:52
@banuprakash you have not included jQuery library! – Rayon Nov 17 '16 at 07:17
if we place more than 5 images? and each has a its audio file when it is clicked played but when clicking on the other image i want to stop first one and to play another one – banu prakash Nov 17 '16 at 09:53

how to get audio on clickeing the image using javascript and pause when playing two or more images one must pasued while other is playing

2 Answers2