Javascript 如何在拖动的图像上添加特定的声音_Javascript_Html

Javascript 如何在拖动的图像上添加特定的声音

javascript html

Javascript 如何在拖动的图像上添加特定的声音,javascript,html,Javascript,Html,这个想法是这样的：听到声音后，必须将正确的图像拖放到框中。我想用这个来教我的女儿有关动物的知识，对我自己来说，我想更多地了解这些特征我真的希望有人能帮我。非常感谢您抽出时间代码如下： <html> <head> <style type="text/css"> #div1 {width:200px;height:158px;padding:10px;border:1px solid #aaaaaa;} </sty

这个想法是这样的：

听到声音后，必须将正确的图像拖放到框中。我想用这个来教我的女儿有关动物的知识，对我自己来说，我想更多地了解这些特征

我真的希望有人能帮我。非常感谢您抽出时间

代码如下：

<html>   
<head>
    <style type="text/css">
        #div1 {width:200px;height:158px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
        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));
        }
    </script>
</head>
<body>
    <p>Jamila sleep het juiste diertje naar de vierkant</p>
    <audio????
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="eend.jpg" draggable="true" ondragstart="drag(event)" width="200" height="158">
<img id="drag2" src="tigr.jpg" draggable="true" ondragstart="drag(event)" width="200" height="158">


#div1{宽度：200px；高度：158px；填充：10px；边框：1px实心35; aaaaaa；}
功能allowDrop（ev）
{
ev.preventDefault（）；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
我睡得很好，因为我在维也纳
这里有一个关于音频API的教程：还有一个关于拖放的教程：但我可以看到你在这一部分做得很好。我想知道的是，在听到动物的声音后，必须将正确的图像放入边框中。。