Sonido de Notificación tipo Facebook con jQuery

Sonido de Notificacion tipo Facebook

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"

    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 !

    Autor: Juan Castro Lurita

    Engineer especialista en Web development, también especializado en multimedia, gráfica e impresiones, Blender 3D, Autocad 3D, etc. Actualmente vivo en Lima - Perú. Amo la informática y la Web. Twitter: @pepoflex

    8 opiniones en “Sonido de Notificación tipo Facebook con jQuery”

    1. Muchas gracias, pero esto funciona si uno es el que envia el mensaje, no para notificar al receptor, si logras solucionarlo sería genial. He estado tratando de solventar eso. Gracias!

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.