使用javascript将图像拖动到框时如何播放音频

时间:2015-05-28 07:36:52

标签: html5-audio

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>

我只包含拖动图像到框中如何在下面的步骤中将图像拖动到图像时播放音频声音

步骤1:所有掉落区域(如运行等图像)应随机化 步骤2:所有音频都应该随机化 - 例如,如果随机化后的第一个音频是循环播放,那么它必须按顺序播放所有3个音频,其间暂停1秒。 步骤3:第一个丢弃区域应按照随机音频顺序循环。如果用户丢失了错误答案,则必须返回其原始位置。 步骤4:如果用户不丢弃任何东西并再次播放音频,它将以相同的顺序再次播放。所有音频将按顺序从1到4播放。 步骤5:如果用户点击重置,它将再次随机化音频和丢弃区域。

0 个答案:

没有答案