如何在jQuery和javascript上播放ajax post方式的声音效果

How to play a sound effect in ajax post way on jQuery and javascript?

本文关键字:方式 post 声音 音效 ajax 播放 jQuery javascript      更新时间:2023-09-26

我试图发挥声音效果时,写一个数据的post方法mysql服务器与php工作,并接收xml。

所以我写了如下代码。当我写一个数据(#postrongend按钮点击),声音工作得很好,但是接收到一个数据,声音不起作用。

我怀疑声音不工作时播放的声音片段是在ajax或类似的功能..

如何在ajax post方法中播放声音?

// Start Main code Area //
$(document).ready(function () {
    // Global variable define area
    curr_date = null;
    last_date = "0000-00-00 00:00:00";
    readAjax_timer = null;
    audioElement = null;
    // End of Global variable define area
    audioElement = document.createElement('audio');
    audioElement.setAttribute('src', './sound/bubble.mp3');
    $("#post_send").click(function () {
        audioElement.play();
        curr_date = getTodayAndTime();
        last_date = curr_date;
        var str_postMsg = $("textarea").val();
        if (str_postMsg == "") {
            return;
        }
        appendShowBubble();
        writeMsgToDB();
    });
    readAjax_timer = setInterval(function() {
        readMsgByAjax();
    }, 2000);
    readMsgByAjax();
});
// End Main code Area //


这是一个接收数据的函数。

function readMsgByAjax() {
// receive a data from mysql by specified school name with ajax.
    var sch_name = "wonderful_element_school";
    var send_data = "sch_name=" + sch_name +
            "&last_date=" + last_date;
    // call ajax post method
    $.post(
            "PHP_readMsg_sql.php",
            send_data,
            function (data) {
                $(data).find('tr').each(function () {
                    var db_record = $(this); //<= <tr>
                    // if "$(this)" is a table head, continue to next tr.
                    if (db_record.attr("id") == "head") {
                        return;
                    }
                    //////////////////////////////////////////////////
                    audioElement.play(); //<== This code doesn't work.
                    //////////////////////////////////////////////////
                    // process contents of tr.
                    var str_message;
                    var str_date;
                    var div_leftframe = $("#left_frame").clone();
                    div_leftframe.css("display", "block");
                    var p_message = div_leftframe.children('p');
                    str_message = db_record.find('td[id=post_message]').text();
                    str_message = str_message.replace(/'u000a/g, "</br>");
                    p_message.html(str_message);
                    var small_message = div_leftframe.children('small');
                    str_date = db_record.find('td[id=post_time]').text();
                    last_date = str_date;
                    str_date = str_date.replace(" ", " at ");
                    small_message.text(str_date);
                    $("#chat_list").append(div_leftframe);
                });
            }
    );

    $("#chat_list").append(div_leftframe);
    var $target = $('html,body');
    $target.animate({scrollTop: $target.height()}, 1000);
}

您必须在函数中传递audioElement,因为它超出了@scrowler提到的函数范围。因此,您可以在document.ready()作用域中添加该函数,也可以将函数更改为:

function readMsgByAjax(audioElement){}

当你在document.ready()代码中调用它时,只需这样做:

readMsgByAjax(audioElement);