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 !
