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 を返されたものと比較したいだけの場合は、テーブルの現在の内容を新しいテーブルの応答と照合するだけで済みます。例として、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;

あなたが提供した最初の行は、クライアントからのタイムゾーンと日付を使用して、エポックからの現在の時刻を秒単位で出力しています。PHP で $_GET['t'] (2 行目) を使用して取得できるクエリ文字列ごとに、この値を既に渡しています。理論的には、PHP コードのかなりの部分を書き直して、その時点と前回のポーリング以降にデータベースに追加された新しい行のみを返すことができます。新しい行のみを返すことで、新しいタグが送信されているかどうかを簡単に確認し、それに応じて組み込むことができます。

これを行う場合の注意点は次の 2 つです。

  • 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 に答える