TECNato – TIC's Perú

Sonido de Notificación tipo Facebook con jQuery

domingo, 5 de mayo del 2013 7 comentarios

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.

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.

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.

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 !


Escrito por para TECNato

7 comentarios

  • Dago
    9 de noviembre del 2013

    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!

  • Juan Castro Lurita
    18 de noviembre del 2013

    Pues eso depende de ti Dago, de acuerdo a lo que necesites le das la funcionalidad.
    Es cuestion de que le lo programes, de acuerdo a tus necesidades :)

  • nicolas|
    29 de noviembre del 2013

    Buenísimo!!

  • Fredy
    25 de agosto del 2016

    Holas donde puedo descargar El sonido En todos los formatos

  • Maikol
    8 de junio del 2017

    Muchas gracias…Me funciono perfectamente :D

  • Juan Castro Lurita
    8 de junio del 2017

    Felicidades.

Deja tu comentario

(Iniciar sesión)

TECNato

TECNato nace de la idea de crear un espacio virtual de usuarios Peruanos para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación)

Hazte miembro

TECNato es libre y abierto a nuevos miembros Peruanos, que estén dispuestos a compartir sus conocimientos en TIC’s, escribenos para mas detalles.

Soporte

Diseño Web:
Grupo Sistemas
Gestor de contenidos:
WordPress