TECNato – TIC's Perú

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:

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

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.

$(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(); 
    $("
").html(''+snd+'').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.

$(document).ready(function(){  
	$("#txt_chat_fb").focus(); 	
    $('').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(); 
    $("
").html(''+snd+'').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.

Chat



	
 Hola Amigo


 

	
 Como estás ?


 


" Activa el Sonido"

Mi Pie de pagina o Footer

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 !