Portada » Pagina » Sonido de alerta tipo Facebook con jQuery

Sonido de alerta tipo Facebook con jQuery

Sonido de alerta tipo Facebook con jQuery. Si somos observadores en la red social más famosa del mundo «FACEBOOK» cuando alguien nos escribe. La página de Facebook con nuestra cuenta iniciada la sesión recibimos mensajes y esto a la vez reproduce un sonido de alerta de manera predeterminada y nos sale la pregunta se podrá hacer algo así para nuestros proyectos web.

Sera imposible hacerlo, creo que no, sin embargo en este artículo les mostrare como desarrollar para que reproduzca un sonido con jQuery y HTML, ademas cuando escribimos un texto y pulsamos enter o presionamos con un click el botón de nuestro sistema.

Sonido de alerta tipo Facebook

Punto 01.- Llamando a nuestros archivos CSS y framework jQuery

Creamos un archivo llamado index.php en la raíz de nuestro servidor o en la carpeta que estén trabajando.

Primero llamar al estilo CSS y luego al jQuery. Estos dos archivos se tienen que declarar en la cabecera de nuestro archivo, es decir dentro de las etiquetas <head></head>

Sonido de alerta tipo Facebook con jQuery

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

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

Punto 02.- Crear de las funciones en jQuery para nuestro chat

Hay que desarrollar 2 funciones con sus respectivos eventos, ademas la función 1 tiene que detectar cuando pulsamos la tecla «ENTER» para enviar nuestro texto.

$(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();
    }
    }
});

La segunda función en Jquery, tiene que detectar la pulsación del botón ENVIAR.

$(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();
    }
    }
	)
});

Punto 03.- Estructura HTML completa dentro de las etiquetas BODY.

Implementación del CHAT en el HTML

<body>
<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>
&nbsp;
<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="&quot; Escribe tu mensaje &quot;" /> <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>
</body>

Gracias por visitarnos, espero que les ayude en sus futuros proyectos web o pedidos de restaurant que últimamente son bien requeridos con sistema de alertas.
Aquí una demo en el servidor.

Sonido de alerta tipo Facebook con jQuery
Sonido de alerta tipo Facebook con jQuery

Referencias:

Sonido con Jquery

Demo

 

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

1 comentario en “Sonido de alerta tipo Facebook con jQuery”

Deja un comentario

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

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad