当模态jquery对话框打开时,自动播放音频?

时间:2015-06-07 23:15:49

标签: jquery-ui audio modal-dialog media-player dreamweaver

我已经设置了一个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">&nbsp;</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>&nbsp;</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>&nbsp;</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" );
        }); 
     }); 

0 个答案:

没有答案