最简单的方法

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与返回的内容，您可以根据新的表响应检查表的当前内容。举个例子，你可以在递归定时调用refreshdiv（）之前使用类似的东西。

// 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 [＆＃39; t＆＃39;]（第二行）在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();

将新数据添加到mysql表时播放声音文件

1 个答案:

最简单的方法

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

至于播放声音