Autoplay Audio when modal jquery dialog box opens? - jquery-ui

Question

I've set up a html where: when you click on a journal button, you open a jquery modal dialog box with more information and the journal. All well and good. But I want audio to play when the dialog box is opened.
So far I have 11 dialog boxes and 11 separate audios for each respective one, but when the audio is set to 'autoplay' all the audios on the page start playing as soon as the page is loaded at once.
How can I make it so that the audio for each respective journal button only starts playing when the dialog box opening button is clicked?
Here's my code for one of the dialog boxes:
<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__="dreamweaver"
$(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" );
});
});