将新数据添加到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，可以简单地检查当前的内容该表对新表的响应。作为一个例子，你可以在对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> 

然后你需要通过获得音频元素并调用播放就可以了（）方法来调用此音频。所以：

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