我已经设置了一个html:当你点击日记按钮时,你打开一个jquery模式对话框,其中包含更多信息和日记。一切都很好。但是我想在打开对话框时播放音频。
到目前为止,我有11个对话框和11个单独的音频,每个相应的音频,但当音频设置为'自动播放'一旦页面加载,页面上的所有音频就开始播放。
如何在单击对话框打开按钮时才开始播放每个相应日记按钮的音频?
这是我的其中一个对话框的代码:
<div id="dialog-4" title="The brushwood platform"><p><span style=""><em>Kevin and Izzy worked on excavating the brushwood platform.</em></span></p>
<table width="688" height="390" align="center" class="dialog_form">
<tr>
<td width="320" height="189"><figure><img src="images/megaphone.png" width="250" height="320" border="0" alt="Illustration of Izzy and Kevin filler"/><figcaption>Illustration of Kevin and Izzy</figcaption></figure></td>
<th width="13"> </th>
<td width="631"><p>This is an area that had been created by laying down brushwood and then covering with worked timbers.</p></td>
</tr>
<tr>
<td height="142" style="text-align: center"><audio id="audio4" title="Spoken Journal" preload="auto" controls autoplay loop >
<source src="../Kizzy (brushwood, reed peat).mp3" type="audio/mpeg">
Your browser does not support the audio element. </audio>
</td>
<td> </td>
<td><p>The platform is on the lake edge and was likely used for stability on the boggy ground. Evidence of flint knapping has been found in and around the platform.</p></td>
</tr>
<tr>
<th height="251"><figure><img src="images/imgp2925-copy.jpg" width="300" height="190" alt="Brushwood"/><figcaption>Part of the brushwood platform excavated in 2015 at Star Carr.</figcaption></figure></th>
<th> </th>
</tr>
</div>
<button id="opener-4"></button>
</article>
var __adobewebfontsappname __ =&#34; dreamweaver&#34;
$(function() {
$( "#dialog-4" ).dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
width: 950,
height: 600,
buttons: {
OK: function() {$(this).dialog("close");}
},
});
$( "#opener-4" ).click(function() {
$( "#dialog-4" ).dialog( "open" );
});
});