Cuando recibimos una respuesta en el chat de Facebook, el sistema reproduce un sonido particular que nos alerta que tenemos un nuevo mensaje.

En este tutorial les voy a explicar como pueden reproducir un sonido con jQuery cuando pulsamos enter o presionamos el botón enviar luego de escribir un mensaje en nuestro chat.

Paso 1.- Haciendo referencia a nuestros archivos

Creamos un archivo llamado index.php, en donde colocaremos el chat.

Antes de finalizar la etiqueta head de nuestro html, hacemos referencia y llamamos a nuestra hoja de estilos CSS:

Código :

<link href="css/estilojsn.css" rel="stylesheet" type="text/css">


A su vez también hacemos referencia y llamamos a nuestro framework jQuery:

Código Javascript :

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>


No olviden que llamamos a nuestros archivos antes de finalizar la etiqueta head, de nuestro html.

Paso 2.- Creación de las funciones en jQuery

Ahora crearemos 2 funciones con sus eventos.

La primera función que vamos a crear nos detecta cuando estamos pulsando la tecla ENTER para enviar nuestro mensaje, porsupuesto luego de haber escrito nuestro mensaje en el chat.

Código Javascript :

$(document).keypress(function(enter) {
    if(enter.which == 13) {
    var snd = $("#txt_chat_fb").val().trim();
    if(snd.length > 0){
   $("#txt_chat_fb").val('');   
   $("#txt_chat_fb").focus(); 
    $("<li></li>").html('<img src="img/usuario_fp.jpg"><span>'+snd+'</span>').appendTo("#msg_fb_chat");
   $("#chat").animate({"scrollTop": $("#chat")[0].scrollHeight}, "slow");
    $('#audio_fb')[0].play();
    }
    }
});


Ahora creamos nuestra segunda función la cual nos detecta cuando estamos pulsando el botón para ENVIAR nuestro mensaje, luego de haber escrito nuestro mensaje en el chat.

Código Javascript :

$(document).ready(function(){  
   $("#txt_chat_fb").focus();    
    $('<audio id="audio_fb"><source src="sonidos/sonido_notificacion.wav" type="audio/wav">, <source src="sonidos/sonido_notificacion.ogg" type="audio/ogg">, <source src="sonidos/sonido_notificacion.mp3" type="audio/mpeg"></audio>').appendTo("body");      
    $("#btn_enviar").on("click",function(){
    var snd = $("#txt_chat_fb").val().trim();
    if(snd.length > 0){
   $("#txt_chat_fb").val('');   
   $("#txt_chat_fb").focus(); 
    $("<li></li>").html('<img src="img/usuario_fp.jpg"><span>'+snd+'</span>').appendTo("#msg_fb_chat");
   $("#chat").animate({"scrollTop": $("#chat")[0].scrollHeight}, "slow");
    $('#audio_fb')[0].play();
    }
    }
   )
});


Paso 3.- Estructura del contenido en el body

Ahora creamos la estructura dentro de la etiqueta body de nuestro html, con las capas o divs(divisiones), formulario, botón, etc. para nuestro chat.

Código HTML :

<div id="contenedor">
<div id="caja_fb_chat">
<h3>Chat</h3>
<div id="chat">
<ul>
<ul>
   <li><img alt="" src="img/jrcl_fp.jpg"> <span>Hola Amigo</span></li>
</ul>
</ul>
 
<ul>
   <li><img alt="" src="img/jrcl_fp.jpg"> <span>Como estás ?</span></li>
</ul>
</div>
<input id="txt_chat_fb" type="text" placeholder="" Escribe tu mensaje ""> <input id="btn_enviar" type="button" value="Enviar">

</div>
<div id="txt_fcs">" Activa el Sonido"</div>
<div id="th_fcs"><img alt="" src="img/fchs_th.jpg" width="256" height="144"></div>
<div id="footer">Mi Pie de pagina o Footer</div>

</div>


Listo !

Eso es todo, espero les sirva de mucho.
Les dejo una demo para que vean como funciona y si desean pueden copiar el codigo fuente, solo le dan click con el boton derecho del mouse y luego ver codigo fuente a la pagina demo.

DEMO

Muchas Gracias amigos !