我在示例页面中使用了多个音频文件，因为我添加了一些JS，这使得我的音频不能在第一次点击时播放。
代码基本上是音频在播放按钮点击以及图像点击时都可以工作，但不幸的是图像工作正常，但按钮不能单击一下
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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="minutes">
<ul class="medical-minutes-list">
<li><a><img src="http://coffeeandcotton.co/wp-content/uploads/2016/11/MUSIC.jpg"> <span class="overlay2 overLi"> </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="http://coffeeandcotton.co/wp-content/uploads/2016/11/MUSIC.jpg"> <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="http://coffeeandcotton.co/wp-content/uploads/2016/11/MUSIC.jpg"> <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>
答案 0 :(得分：2)
从您的问题中可以看出，您只是希望能够通过单击控件中的播放按钮或相关的audio元素来播放img元素，并且当发生这种情况时，所有其他音频都应该停止。
如果是这样的话，那么你的代码就比它需要的复杂得多。众多事件处理程序正在引发您的问题。
要解决此问题，您只需将click处理程序附加到img即可停止/启动音频，并在音频本身附加play处理程序以阻止其他人播放。
试试这个：
$(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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="minutes">
<ul class="medical-minutes-list">
<li>
<a>
<img src="http://coffeeandcotton.co/wp-content/uploads/2016/11/MUSIC.jpg">
<span class="overlay2 overLi"> </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="http://coffeeandcotton.co/wp-content/uploads/2016/11/MUSIC.jpg">
<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="http://coffeeandcotton.co/wp-content/uploads/2016/11/MUSIC.jpg">
<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>
我还强烈建议您删除<a>元素。它们旨在用作站点中其他内容的锚点，而不是组元素。