2

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

这是我的表格 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>";
?>
4

1 回答 1

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 进行比较，您可以简单地检查表的当前内容与新表响应。例如，您可以在递归定时调用 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['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();
于 2014-11-23T21:49:16.090 回答