Pagina

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

 

 

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Un comentario

Deja una respuesta

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

Mira también
Cerrar
Botón volver arriba