Question

我目前正在尝试使用不同的大陆执行html拖放表。这个人将有能力将右大陆拖入到它所假设的div中。我已经完成了所有的div标签和拖放功能，但我还想添加的是声音。我有两个声音对.mp3和wrong.mp3。我想这样他们就可以在这个人把正确的大陆带到正确的地方并且当它是错误的时候（正确的一个作为right.mp3，当错误的一个被错误地接受时）。我尝试了许多不同的方式来做声音但不幸的是我无法正常工作。如果有人知道如何做到这一点，那么如果你向我展示它在代码中的外观，我会非常满意。下面是我到目前为止所做的代码。谢谢。

P.S我很抱歉我的英语，因为它不是我的第一语言，对由此带来的任何不便表示歉意。谢谢。

代码：

    <!DOCTYPE HTML>
    <html>
    <head>
        <style type="text/css">
            #div1
            {float:left; width:500px; height:250px;border:1px solid;
                position: absolute;
                background-image:url('Winkel_triple_projection_SW.jpg');
                background-size:500px 255px;
                background-repeat: no-repeat;
                z-index: -10;
            }
            #div2
            {
             width:80px; height:108px; margin:10px;border:1px solid #aaaaaa;
                background: white;
                z-index: -1;
             position: absolute;
                margin-top: 100px;
                margin-left: 120px;
            }

            #americainside
            {
                width:100px; height:150px;border:1px solid #aaaaaa;
            }
            #div3
            {
                width:95px; height:100px; margin:10px;border:1px solid #aaaaaa;
                background: white;
                z-index: -2;
                position: absolute;
                margin-left: 90px;
            }
            #northmurica
            {

                width:100px; height:130px;border:1px solid #aaaaaa;
            }
            #div4
            {
                width:95px; height:100px; margin:10px;border:1px solid #aaaaaa;
                background: white;
                z-index: -1;
                position: absolute;
                margin-top: 80px;
                margin-left: 220px;
            }
            #Africa
            {
                width:100px; height:129px;border:1px solid #aaaaaa;
            }
            #div5
            {
                width:200px; height:80px; margin:10px;border:1px solid #aaaaaa;
                background: white;
                z-index: -1;
                position: absolute;
                margin-top: 0px;
                margin-left: 232px;
            }
            #Europe
            {
                width:210px; height:120px;border:1px solid #aaaaaa;
            }
            #div6
            {
                width:71px; height:58px; margin:10px;border:1px solid #aaaaaa;
                background: white;
                z-index: -1;
                position: absolute;
                margin-top: 140px;
                margin-left: 390px;
            }
            #Australia
            {
                width:100px; height:100px;border:1px solid #aaaaaa;
            }
            #div7
            {
                width:300px; height:40px; margin:10px;border:1px solid #aaaaaa;
                background: white;
                z-index: -1;
                position: absolute;
                margin-top: 210px;
                margin-left: 90px;
            }
            #Southpole
            {
                width:355px; height:70px;border:1px solid #aaaaaa;
            }
            #right
            {   width:360px;
                border:5px solid #aaaaaa;
                float:right;
                margin-right: 30%;
            }
    </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>

    <div id="div1"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
    <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
    <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
    <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
    <div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>


    <div id="right">
        <div id="americainside" ondrop="drop(event)" ondragover="allowDrop(event)">
            South America
            <img src="South america.png" draggable="true" ondragstart="drag(event)"

                 id="drag2" width="80px" height="108px"></div>

        <div id="northmurica" ondrop="drop(event)" ondragover="allowDrop(event)">
            North America
            <img src="North america.png" alt="North America" draggable="true" ondragstart="drag(event)"

                 id="drag1" width="95px" height="100px"></div>

        <div id="Africa" ondrop="drop(event)" ondragover="allowDrop(event)">
            Africa
            <img src="Africa.png" draggable="true" ondragstart="drag(event)"

                 id="drag3" width="95px" height="100px"></div>
    <div id="Europe" ondrop="drop(event)" ondragover="allowDrop(event)">
            Europe
            <img src="Europe.png" draggable="true" ondragstart="drag(event)"

                 id="drag4" width="200px" height="80px"></div>

        <div id="Australia" ondrop="drop(event)" ondragover="allowDrop(event)">
            Australia
            <img src="Australia.png" draggable="true" ondragstart="drag(event)"

                 id="drag5" width="71px" height="58px"></div>

        <div id="Southpole" ondrop="drop(event)" ondragover="allowDrop(event)">
            Southpole
            <img src="south pole.png" draggable="true" ondragstart="drag(event)"

                 id="drag6" width="350px" height="40px"></div>
    </div>

    </body>
    </html>

我知道我可以使用其他东西，但我想用HTML做。如果你建议其他可能的选择，我仍然不介意。我显然不会要求任何人完成整个工作，但如果你至少能告诉我一个例子，那将是非常好的。谢谢。

编辑：我也在寻找按钮，它会在div标签移动到某处后清除它们。

编辑2：我已经添加了亚历山大T建议的播放功能，但我确信这里做错了。
代码：

        <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));
                ev.playSound;
            }
        var path = 'cat.mp3'
            function playSound(path) {
                var sound = new Audio(path);
                sound.play();
            }

        </script>

这不行。我想我没有正确地调用这个功能。如果有人能告诉我如何做到这一点。谢谢。

编辑：这是它现在的样子，但仍然无效。不知道我在这里做错了什么。

        <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));
                playSound("catSound");
            }
            function playSound(path) {
                var sound = new Audio(path);
                sound.play();
            }



        </script>

Answer 1

尝试使用HTML5音频API。

function playSound(path) {
    var sound = new Audio(path); 
    sound.play();
}

其中'path'是一个包含声音路径的字符串，例如'/audio/rightSound.mp3'

JS中有Audio个对象的一组方法和属性。在此处找到http://www.w3schools.com/tags/ref_av_dom.asp 这里有关于在HTML5 http://html5doctor.com/html5-audio-the-state-of-play/

中使用音频的非常好的文章

HTML拖放声音

1 个答案: