如何在一页上使用播放和暂停按钮来播放多个音频？

Question

的Javascript：

<script> 
/** 
* jQuery document ready function (when the DOM is loaded) 
* From here we can use $ to reference the jQuery object 
*/ 
jQuery(document).ready(function($) { 
/** 
* Finds all elements that have _BOTH_ the .audio and .controls classes 
* then attaches a click handler to the .playpausebtn class 
*/ 
$('.audio.controls').on('click', '.playpausebtn', function(e) { 
/** 
* $(this) refers to the element that the event has fired on, in this case its the 
* .playpausebtn that you clicked on (not any of the others) 
* 
* $(this).parent() will target the parent element, then inside the parent element we want to 
* find the `audio` element 
* 
* Using the array key [0] should access the element directly, rather than the set of matched elements 
*/ 
audio = $(this).parent().find('audio')[0]; 
if (audio.paused) { 
audio.play(); 
$(this).css('background', 'url("Images/pause.png") no-repeat'); 
} else { 
audio.pause(); 
$(this).css('background', 'url("Images/play.png") no-repeat'); 
} 
}); 
}); 
</script> 

HTML：

<div class="controls"> 
<audio class="audio" name="audio" src="Media/Beats/Catching waves/Catching Waves - [Prod. By Jordan Ace] - Preview Version.mp3"></audio> 
<button class="playpausebtn"></button> 
<button class="mutebtn"></button> 
</div> 
<div class="controls"> 
<audio class="audio" name="audio" src="Media/Beats/Coming up/Coming Up - [Prod. By Jordan Ace] - Preview Version.mp3"></audio> 
<button class="playpausebtn"></button> 
<button class="mutebtn"></button> 
</div> 

不幸的是我的声音是不打可言，有人可以帮我吗？我不确定我出错的地方。它将用于在我的网站上的一页中的表格中播放多首曲目。

Answer 1

您的初始选择器$('.audio.controls')是错误的。它应该是$('.controls')。这可能有帮助。