Single click does not play html5 audio

Question

I'm using multiple audio files in a sample page for that I have added few JS which is making my audio not to play on first click.

The code is basically for the audio to work both on Play button click as well image click, but unfortunately the image works fine but the button is not working on a single click

document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
        }
    }
}, true);

$(document).ready(function(){
	
	var songlist = $('.medical-minutes-list li');
		$(songlist).each(function(){
		var getAudioLink = $(this).find('a');
        
		$(getAudioLink[0]).click(function(){  
		         
		  //pause playing other audio
		 $('audio').trigger('paused');
			
		  //set play time to 0  for other audio
		  //$('audio').prop('currentTime',0);
		  if($(this).find('.overlay2').hasClass("overLi"))
		  { 
           $('audio').trigger('pause');
		 $(this).find('.overlay audio').trigger('pause');		  
           $('.overlay2').removeClass('overLi'); 
		  }
		  else
		  {
           $('audio').trigger('pause');
           $('.overlay2').removeClass('overLi');
		  //starts playing current audio 
		  $(this).find('.overlay audio').trigger('play');
		  $(this).find('.overlay2').addClass('overLi');
		  }
          
		});
	});
});

.medical-minutes-list {
    display: flex;
    flex-wrap: wrap;
}
.medical-minutes-list li {
    width: 40%;
    padding: 0;
    float: left;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 20px;
}
ul li {
    padding: 4px 0 4px 15px;
    position: relative;
}
.medical-minutes-list li a {
    position: relative;
    float: left;
    width: 100%;
    min-height: 173px;
}
li{list-style-type:none}
.medical-minutes-list li a img {
    width: 100%;
}
img {
    max-width: 100%;
    height: auto;
}
.medical-minutes-list .audio {
    position: absolute;
    border: 1px solid #868686;
    width: 100%;
    background: #f1f3f4;
    left: 0;
    min-height: 56px!important;
    bottom: 0;
    z-index: 1;
}
.innerLeftContent .minutes .medical-minutes-list li a .overLi, .innerLeftContent .minutes .medical-minutes-list li a:hover .overlay {
    left: 0;
    height: 100%;
    background-color: rgba(0,0,0,.3803921568627451);
    background-position: center;
}
.innerLeftContent .minutes .medical-minutes-list li a .overLi, .innerLeftContent .minutes .medical-minutes-list li a:hover .overlay {
    display: block!important;
    cursor: pointer;
    background: url(http://wphredesign.stage.bluespiremarketing.net/WPHRedesign/media/Emerge_WPHRedesign/Audio/mic.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    bottom: 96px;
    left: 30px;
    right: 0;
    border: 0;
    border-radius: 0;
    width: auto!important;
}

Rory McCrossan · Accepted Answer

It appears from your question that you simply want to be able to play the audio element by clicking the play button in the controls or the related img element, and when that happens all other audio should stop.

If that's the case your code is much more complicated than it needs to be. The multitude of event handlers is causing your problem.

To fix this you can simply attach a click handler to the img to stop/start the audio, and an play handler on the audio themselves to stop the others from playing.

Try this:

$(function() {
  $('.medical-minutes-list a').click(function(e) {
    e.preventDefault();
    var $audio = $(this).find('audio');
    $audio.data('playing') ? $audio.trigger('pause') : $audio.trigger('play');
  });

  $('.audio').on('play', function() {
    $('.audio').data('playing', true).not(this).trigger('pause').data('playing', false);
  }).on('pause', function() {
    $(this).data('playing', false);
  });
});

.medical-minutes-list {
  display: flex;
  flex-wrap: wrap;
}

.medical-minutes-list li {
  width: 40%;
  padding: 0;
  float: left;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 20px;
}

ul li {
  padding: 4px 0 4px 15px;
  position: relative;
}

.medical-minutes-list li a {
  position: relative;
  float: left;
  width: 100%;
  min-height: 173px;
}

li {
  list-style-type: none
}

.medical-minutes-list li a img {
  width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

.medical-minutes-list .audio {
  position: absolute;
  border: 1px solid #868686;
  width: 100%;
  background: #f1f3f4;
  left: 0;
  min-height: 56px!important;
  bottom: 0;
  z-index: 1;
}

.innerLeftContent .minutes .medical-minutes-list li a .overLi,
.innerLeftContent .minutes .medical-minutes-list li a:hover .overlay {
  left: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, .3803921568627451);
  background-position: center;
}

.innerLeftContent .minutes .medical-minutes-list li a .overLi,
.innerLeftContent .minutes .medical-minutes-list li a:hover .overlay {
  display: block!important;
  cursor: pointer;
  background: url(http://wphredesign.stage.bluespiremarketing.net/WPHRedesign/media/Emerge_WPHRedesign/Audio/mic.png);
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 96px;
  left: 30px;
  right: 0;
  border: 0;
  border-radius: 0;
  width: auto!important;
}

I would also strongly suggest you remove the elements. They are intended to be used as anchors to other content in your site, not to group elements.

Single click does not play html5 audio

Answers (1)

Related Questions