如何开发jQuery拖拽有音效？

Question

我需要创建 jQuery 拖放。 当我放下物品时应该发出声音，有人知道该怎么做吗？ 我知道我们可以使用 HTML5 音频标签与 CSS 和 jQuery 来实现它，但我需要一个示例代码来修改它。

$(function() { $( "#draggable" ).draggable();

// 在我的 droppable 中需要声音

    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});

// 我的代码

   $("div#gameboard div").droppable({


        drop: function (event, ui) {
            {

                sendMessage("m " + this.id + " " +
                                 localToGlobal(imgID) + " " +
                                 $(ui.helper).css("left") + " " +
                                 $(ui.helper).css("top")

                            );


            }

           myAudio.src = 'audio/song.mp3';
        }
    });

Answer 1

我可能并不完全正确，但这里有一些可以帮助你的东西：

var myAudio = document.createElement('audio');
myAudio.controls = true;
myAudio.src = 'Your File';
myAudio.play();

为了让它在你下降时工作，你可以在之前创建音频标签，然后在每次下降时点击 play()。

我会在准备好的 function 中初始化音频标签：

$(document).ready(function() {

}

然后使用您的代码：

$( "#droppable" ).droppable({
    drop: function( event, ui ) {
        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
                .html( "Dropped!" );

        myAudio.play();
    }
});

});

Answer 2

我必须将代码放在 $(document).ready(function() 之外才能让它在我的应用程序中工作：

    <script>
var myAudio = document.createElement('audio');
myAudio.controls = true;
myAudio.src = 'audio/beep.mp3';
myAudio.src = 'audio/beep.wav';
//myAudio.play();
</script>

然后你只需触发 myAudio.play(); 在你的drop里面：function代码。