How do I get my chat script to play a sound when there is a new post?

Question

Chat Page JavaScript: How do I get my chat script to play a sound when there is a new post?

Here are the 3 scripts I am using:

<script type="text/javascript"><!--
function showmessages(){
   if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET","show-messages.php?" + Math.random(),false);
      xmlhttp.send(null);
   }
   else{
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.open("GET","showmessages.php?" + Math.random(),false);
      xmlhttp.send();
   }
   document.getElementById('messages').innerHTML = xmlhttp.responseText;
   setTimeout('showmessages()',5000);
}

showmessages();
function send(){
   var sendto = 'send.php?message=' + document.getElementById('message').value + '&name=' + document.getElementById('name').value;
   if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET",sendto,false);
      xmlhttp.send(null);
   }
   else{
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.open("GET",sendto,false);
      xmlhttp.send();
   }
   var error = '';
   switch(parseInt(xmlhttp.responseText)){
   case 1:
      error = '<span class="pink">The database is down!</span>';
      break;
   case 2:
      error = '<span class="pink">The database is down!</span>';
      break;
   case 3:
      error = '<span class="pink">Don`t forget the message!</span>';
      break;
   case 4:
      error = '<span class="pink">The message is too long!</span>';
      break;
   case 5:
      error = '<span class="pink">Don`t forget the name!</span>';
      break;
   case 6:
      error = '<span class="pink">The name is too long!</span>';
      break;
   case 7:
      error = '<span class="pink">This name is already used by somebody else!</span>';
      break;
   case 8:
      error = '<span class="pink">The database is down!</span>';
   }
   if(error == ''){
      document.getElementById('error').innerHTML = '';
      showmessages();
   }
   else{
      document.getElementById('error').innerHTML = error;
   }
}
// --></script>



Your Name: <input type="text" id="name" value="" /><br />
Enter Your Message:<br /><textarea id="message" cols="20" rows="2"></textarea><br /> 
<input type="button" value="Send" onClick="send();document.getElementById('message').value = '';"/>

<div id="messages"></div>
<div id="error"></div>

show-messages.php

<?php
mysql_connect('*******','*******','*******1');
mysql_select_db('chat') or die(2);
$random = microtime(true);

echo '<p><a href="?'.$random.'">Refresh Chat</a></p>
';
$result = mysql_query("select * from chat order by time desc limit 0,10");
$messages = array();
$i = 0;
while($row = mysql_fetch_array($result)){
$messages[$i] = '<p class="purple"><span class="pink"><strong>'. $row[name] . '</strong></span> said:<br /><span class="purple">' . $row[message] . '</span><br /> <span class="pink">';

$timeago = time() - $row['time'];
if($timeago > 86400){
$messages[$i] .= date('g:i A M, d Y',$row[time]);
}
else{
$hours = floor($timeago / 3600); 
$minutes = floor(($timeago - ($hours * 3600)) / 60);
$seconds = floor($timeago - ($hours * 3600) - ($minutes * 60));
if($hours > 0){
if($minutes > 9){
if($seconds > 9){
$messages[$i] .= $hours . ' h, ' . $minutes . ' min, ' . $seconds . ' sec';
}
else{
$messages[$i] .= $hours . ' h, ' . $minutes . ' min, 0' . $seconds . ' sec';
}
}
else{
if($seconds > 9){
$messages[$i] .= $hours . ' h, 0' . $minutes . ' min, ' . $seconds . ' sec';
}
else{
$messages[$i] .= $hours . ' h, 0' . $minutes . ' min, 0' . $seconds . ' sec';
}
}
}
else if($minutes > 0){
if($seconds > 9){
$messages[$i] .= $minutes . ' min, ' . $seconds . ' sec';
}
else{
$messages[$i] .= $minutes . ' min, 0' . $seconds . ' sec';
}
}
else{
$messages[$i] .= $seconds . ' sec';
}
$messages[$i] .= ' ago';
}
$messages[$i] .= "</span></p><p class='purple'>----------------------------</p>";
$old = $row[time];
$i++;
}
for($i=0;$i<=9;$i++){
echo $messages[$i];
}
mysql_query("delete from chat where time < " . $old);
$random = microtime(true);
echo '<p><a href="?'.$random.'">Refresh Chat</a></p>';
?>

send.php

<?php
//Connect to MySQL
mysql_connect('******', '******', '******') or die (1);
//Select database
mysql_select_db('chat') or die (2);
$message = $_GET['message']; 
$name = $_GET['name'];
//Check if message is empty and send the error code
if(strlen($message) < 1){
echo 3;
}
//Check if message is too long
else if(strlen($message) > 255){
   echo 4;
}
//Check if name is empty
else if(strlen($name) < 1){
   echo 5;
}
//Check if name is too long
else if(strlen($name) > 29){
   echo 6;
}
//Check if the name is used by somebody else
else if(mysql_num_rows(mysql_query("select * from chat where name = '" . $name . "' and ip != '" . $_SERVER['REMOTE_ADDR'] . "'")) != 0){
   echo 7;
}
//If everything is fine
else{
   //This array contains the characters what will be removed from the message and name, because else somebody could send redirection script or links
   $search = array("<",">","&gt;","&lt;");
   //Insert a new row in the chat table
   mysql_query("insert into chat values ('" . time() . "', '" . str_replace($search,"",$name) . "', '" . $_SERVER['REMOTE_ADDR'] . "', '" . str_replace($search,"",$message) . "')") or die(8);
}
?>

What changes do I make to get a .wav file to play if and when a new post is made? Thanks.....

Answer 1

Since teh function showmessages() is what calls the show-messages.php via AJAX, a callback option would be good. Have you considered using jQuery as an AJAX framework? I use it all the time. It has incredible handlers for different type of results (my favorite is JSON returns), and there are callback functions to be run after the function completes, which you can set up.

On the callback, if you can trigger a sound to be played it would be perfect. However I'm not familiar with playing music on sites (other than that old school way of embedding a .wav file into an HTML that plays in the background, but that's so web 1.0, not 2.0).

Here's a plugin via jQuery that I found that can execute playing a certain noise you have stored on the server: http://plugins.jquery.com/project/sound_plugin

Utilizing these two, you could get this done in no time, I'm sure.

EDIT:

function showmessages(){
    $.get("show-messages.php", { random: Math.random()},
   function(data){
        $('#messages').html(data); // put teh return data here
        // call back the function to play sound based on the jQuery plugin. 
   });
}

Above is the simpler AJAX query you can set up instead of your current showmessage() function.

Further, if you wish to get a more complex result that has multiple arrays in it using jSON (think of it as a PHP array except in teh form of javascript object). Also note the json_encode() function in PHP that creates a JSON object out of any PHP array (even multi levels, excluding PHP objects I think)

function showmessages(){
    $.get("show-messages.php", { random: Math.random()},
   function(data){
       if(data.code==1) {
           // assuming 1 means successful
            $('#messages').html(data.content); // put teh return data here
        // call back the function to play sound based on the jQuery plugin.
       } else {
           // execute code that runs IF the result was no good
       }
   },'json');
}