php - 收到新消息时播放声音

Question

我正在为我的学生群聊天，我正在使用 AJAX 来获取这样的消息

//Initial call i make so user do not wait 2 seconds for messages to show
function marko() {
    $("#porukice").load("messages.php"); //Load the content into the div
}

marko();

//autorefresh every 2 seconds
var auto_refresh = setInterval(
(function () {
    $("#porukice").load("messages.php"); //Load the content into the div
}), 2000);

发送消息我也是用ajax，像这样

var frm = $('#form1');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                document.getElementById("message").value = "";
                document.getElementById('play').play();
            }
        });

        ev.preventDefault();
    });

这是 message.php 的一部分(生成消息的地方)

$sql = $conn->query('(SELECT * FROM chat ORDER BY time desc limit 0, 10) ORDER BY time');

while($row = mysqli_fetch_array($sql))
{
    $rows[] = $row;
}

foreach($rows as $row){ 
    $time = date('H:i:s', strtotime($row['2']));
    echo '['.$time.'] <b>'.$row['0'].'</b>: '.stripslashes($row['1'])."<br/>";
}

我正在尝试在收到新消息时播放声音> 我想出的唯一解决方案是在发送消息时播放声音

document.getElementById('play').play();

如您在上面的代码中所见。当消息到来时，当 mysql 行更新时，我不知道如何播放它。 我在 stackoverflow 上看到了其他答案，但它们对我没有帮助。

注意:$row['1']是消息，$row['0']是用户名， $row['2'] 是时间。

Answer 1

您可以从获取消息的 PHP 脚本传递您获得的最后一个 ID 的值。然后，将它存储在一个 jQuery 变量中，在重新加载消息后，检查 ID 是否不同，如果不同(这意味着出现了一条新消息)，则播放声音。

例如，在foreach 循环之后:

return json_encode(array('last_time' => $rows[count($rows)-1][2]));

在你的 jQuery 上:

var last_time = 0; // <--- New
var new_time = 0; // <--- New

// Initial call i make so user do not wait 2 seconds for messages to show
function marko() {
    $("#porukice").load("messages.php"); //Load the content into the div

    // New
    if (last_time < new_time) {
        document.getElementById('play').play(); 
        last_time = new_time;       
    }
}

marko();

//autorefresh every 2 seconds
setInterval(function () { // <--- Some edits here
    marko(); // <--- Some edits here
}, 2000);

// ....

var frm = $('#form1');
frm.submit(function (ev) {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            document.getElementById("message").value = "";

            last_time = new_time; // <--- New
            new_time = data.last_time; // <--- New
        }
    });

    ev.preventDefault();
});

我还没有测试过这个，但你可以随意测试并告诉我。

已编辑为使用 time 而不是 id