How can play audio when drag image to box using javascript - html5-audio

Question

function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
body{background:url(assets/bg.png)no-repeat;}
#drag1{margin-left:10px;}
#div1{background-color:#fff;border:2px dashed #a92928;width:193px;height:152px;float:left;margin-left:10px;}
<div class="drag_drop">
<img id="drag1" src="http://elets-winora.ru/sykkel/image_sykkel_18530_small.jpg" draggable="true" ondragstart="drag(event)">
<img id="drag1" src="http://www.charmingsharmapartments.com/_wp_generated/wp54f0f9a8_06.png" draggable="true" ondragstart="drag(event)">
<img id="drag1" src="http://www.aveac.org.uk/Shaun%20win.JPG" draggable="true" ondragstart="drag(event)">
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
I have included only drag image to box how can play audio sound when drag to image to box given below following steps
Step 1: All drop area(with images like running etc.,) should be randomized
Step 2 : all audio should be randomized – for example if first audio after randomization is cycling then it has to play all 3 audios sequentially with 1 sec pause in between.
Step 3 : first drop area should be cycling as per random order of audio. If user has dropped wrong answer it has to go back to its original position.
Step 4 : if user don’t drop any thing and play audio again it will play again in same order. All audio will be played in sequential order from 1 to 4.
Step 5 : if user clicks reset it will randomize again audio and drop area again.