播放多个音频文件会在Firefox上引发错误

Question

我在示例页面中使用了多个音频文件。

音频应在音频播放器的播放按钮单击以及background image单击时播放，并在播放过程中始终显示麦克风图像。

但这仅在not working和Firefox中是IE，其他都很好，在单击音频播放器中的播放按钮时，麦克风图像未获得activated ，但在单击BG图像时效果很好。

粘贴小提琴网址，因此代码段无效

https://jsfiddle.net/sivakanagaraj/g8rxp3h0

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

  $('.audio').on('play', function() {
    $('.audio').data('playing', true).not(this).trigger('pause').data('playing', false) &&  $(this).find('.overlay2').removeClass('overLi');
  }).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;
}
.minutes .medical-minutes-list li a .overLi, .minutes .medical-minutes-list li a:hover .overlay {
    left: 0;
    height: 100%;
    background-color: rgba(0,0,0,.3803921568627451);
    background-position: center;
}
.minutes .medical-minutes-list li a .overLi, .minutes .medical-minutes-list li a:hover .overlay {
    display: block!important;
    cursor: pointer;
    background: url(https://i.pinimg.com/originals/50/01/99/5001999f2024f364b90d6859a2ae4922.png);
    background-repeat: no-repeat;
    position: absolute;
    background-size:100%;
    top: 0;
    bottom: 96px;
    left: 30px;
    right: 0;
    border: 0;
    border-radius: 0;
    width: auto!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="minutes">
<ul class="medical-minutes-list">
<li><a><img src="https://i2.wp.com/ipadhelp.com/wp-content/uploads/2014/03/sound-e1451764735946.jpg?resize=800%2C525&ssl=1"> <span class="overlay2 "> </span> <span class="overlay overlay1">
  <audio class="audio" controls="" src="http://www.schillmania.com/projects/soundmanager2/demo/_mp3/rain.mp3">Your browser does not support the audio element.</audio>
  </span> </a>
  <div class="details">
	<h4><strong>demo</strong></h4>
  </div> 
</li><li><a><img src="https://i2.wp.com/ipadhelp.com/wp-content/uploads/2014/03/sound-e1451764735946.jpg?resize=800%2C525&ssl=1"> <span class="overlay2"> </span> <span class="overlay overlay1">
  <audio class="audio" controls="" src="http://www.evidenceaudio.com/wp-content/uploads/2014/10/monsterchords.mp3">Your browser does not support the audio element.</audio>
  </span> </a>
  <div class="details">
	<h4><strong>demo</strong></h4>
  </div>
</li><li><a><img src="https://i2.wp.com/ipadhelp.com/wp-content/uploads/2014/03/sound-e1451764735946.jpg?resize=800%2C525&ssl=1"> <span class="overlay2"> </span> <span class="overlay overlay1">
  <audio class="audio" controls="" src="http://www.evidenceaudio.com/wp-content/uploads/2014/10/lyricslap.mp3">Your browser does not support the audio element.</audio>
  </span> </a>
  <div class="details">
	<h4><strong>demo</strong></h4>
  </div>
</li>
</ul>
</div>