Как разработать jQuery drag and drop со звуковым эффектом?

Question

Мне нужно создать jQuery drag and drop. когда я бросаю предмет должен издавать звук, доза кто-нибудь знает, как это сделать? Я знаю, что мы можем сделать это с помощью аудио-тега HTML5 с помощью CSS и jQuery, но мне нужен пример кода для его изменения.

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

// нужен звук в моем сбрасывании

    $( "#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 () каждую каплю.

Я бы инициализировал звуковую метку в функции готовности:

$(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 (); внутри вашей капли: код функции.