javascript - 当新数据添加到 mysql 表时播放声音文件

Question

我希望浏览器在新的表行添加到数据库时播放声音文件。

这是我的表格 php 文件。我正在使用 ajax 进行刷新。

我认为 Javascript 将成为我的解决方案。您对如何实现这一目标有什么想法吗？

show_table.php

<script src="ajax2.js"></script>
<script type="text/javascript"><!--
refreshdiv();
// --></script>
<div id="timediv"></br>

ajax2.js

var seconds = 1;
var divid = "timediv";
var url = "print_table.php";

function refreshdiv(){


var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}



fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;



xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}



var seconds;
window.onload = function startrefresh(){
setTimeout('refreshdiv()',seconds*1000);
}

print_table.php

$query = "SELECT * FROM $tablename ORDER BY time DESC LIMIT 50";
$result = mysql_query($query);


echo "<table class='gridtable'>
<tr>
<th>Time</th>
<th>Department</th>
<th>Priority</th>
<th>Destination</th>
<th>Comment</th>
<th>Status</th>
<th>Staff</th>
<th>Confirm</th>
</tr>";

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{

echo "<tr>";
echo "<td>" . $row['time'] . "</td>";
echo "<td>" . $row['department'] . "</td>";
echo "<td>" . $row['priority'] . "</td>";
echo "<td>" . $row['destination'] . "</td>";
echo "<td>" . $row['comment'] . "</td>";
echo "<td>" . $row['status'] . "</td>";
echo "<td>" . $row['staff'] . "</td>";
echo "<td><a href=\"edit3.php?id=".$row['id']."&status=app\">Confirm</a></td>";
echo "</tr>";
}
echo "</table>";
?>

Answer 1

最简单的方法

(请继续阅读，我将对此进行分割)

HTML:

<!-- Include this in the HTML, if we wanted to play a flute sound -->
<audio id="audiotag1" src="audio/flute_c_long_01.wav" preload="auto"></audio>  

Javascript:

// Replace: document.getElementById(divid).innerHTML=xmlHttp.responseText; with:
if(document.getElementById(divid).innerHTML != xmlHttp.responseText)
{
    // Moving this line inside since there is no reason to update if the content is the same.
    document.getElementById(divid).innerHTML=xmlHttp.responseText;

    // Play sound
    document.getElementById('audiotag1').play();
}

如何查看表格是否已更改:

如果您只想将当前的 HTML 与返回的 HTML 进行比较，您可以简单地根据新表响应检查表的当前内容。例如，您可以在递归定时调用刷新 div() 之前使用类似的内容。

// If the table within divid ("timediv") is different, play an alert sound
if(document.getElementById(divid).innerHTML != xmlHttp.responseText)
{
    // Play the sound here, the tables are different
}

但是，这实际上可能无法回答您的问题，因为您特别要求添加行。上面的内容涵盖了这一点，但也会注册对现有行的更新。

你有这样的台词:

parseInt(new Date().getTime().toString().substring(0, 10))

和

var nocacheurl = url+"?t="+timestamp;

您提供的第一行使用客户端的时区和日期输出自纪元以来的当前时间(以秒为单位)。您已经在每个查询字符串中传递了这个值，您可以使用 $_GET['t'] 在 PHP 中获取该值(第二行)。理论上，您可以重写相当多的 PHP 代码，以仅返回自该时间和上次轮询以来放入数据库的新行。通过仅返回新行，您可以简单地检查是否正在发送新标签，并相应地合并它们。

如果您这样做，请注意两点:

• 如果您通过 MySQL 查询传递查询字符串，请确保转义或参数化您的查询。
• 请注意您所传递的日期，因为它们是根据客户的日期时间计算的。如果可能，请考虑依赖服务器端时间。

至于播放声音

这里有一些关于如何播放声音的详细信息:Playing audio with Javascript?

要播放音频，最简单的方法是使用音频标签(HTML5)。 http://www.storiesinflight.com/html5/audio.html 上给出的示例是:

<audio id="audiotag1" src="audio/flute_c_long_01.wav" preload="auto"></audio>

然后您需要通过获取音频元素并调用其 play() 方法来调用此音频。所以:

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