Portada » HTML5 Demostración y Ejemplos » jQuery Facebook Notificaciones con sonido

jQuery Facebook Notificaciones con sonido

jQuery Facebook Notificaciones con sonido. Este articulo mostrare que se puede hacer notificaciones de audio al insertar un registro a la base de datos MYSQL, trabajando conjuntamente con HTML, JavaScript, PHP,  MYSQL, esto seria necesario por ejemplo para restaurant que trabajan bajo plataforma via online, para incrementar sus ventas, cuando alguien hace un pedido automaticamente salta una alerta de audio, informando que se realizo un nuevo pedido en la plataforma.

Hoy voy a decirle acerca de cómo mostrar la caja de notificación aparecen con efecto de sonido tipo Facebook, hemos visto en Facebook en el lado derecho tenemos algunas notificaciones de publicación aparecen si algunos puestos, he hecho lo mismo con jquery, ajax y php con el mismo sonido de notificación, es muy simple la lógica sólo tiene que usar algún tipo de tiempo y es sólo unas pocas líneas de código, permite ver cómo hacerlo.

jQuery Facebook Notificaciones con sonido

HTML

Aquí toma la caja del área de texto para incorporar un cierto texto, y toma un botón también, toma más adelante un DIV y dele nombre de la identificación cómo #alertbox para notificaciones múltiples VIA Ajax.

<div class="lessoncup">
<textarea id="box" class="box"></textarea>
<input value="POST" id="btn" class="btn" type="button" />
<div id="loader"></div>
</div>
<div id="alertbox"></div>

JAVASCRIPT

Escriba la función de clic en el botón #btn button como selector, guarde el valor del cuadro de texto en una variable como var post = $ (‘# box’). val (); Ahora usando la solicitud de ajax enviar la variable de la publicación al archivo de alerts.php dentro de la función del éxito del ajax prepend el mensaje vuelto del archivo de alerts.php al #alertbox como selector usando el método del prepend(), uso posterior ocultar la notificación #alerts después de algún tiempo Delay using delay() método como este $ (‘#alerts’). delay (5000) .fadeOut (‘slow’);

<script>
 
$(document).ready(function(){
  
  
 $('#btn').click(function(){
   
  var post = $('#box').val();
   
  if(post==""){
    
   alert('enter please');
    
    
  }else{
   
  $('#loader').fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;<span class="loading">sending</span>');
   
  var datasend = "alert="+post;
   
  $.ajax({
    
   type:'POST',
   url:'alerts.php',
   data:datasend,
   cache:false,
   success:function(msg){
     
    $('#box').val('');
    $('#loader').hide();
    $('#alertbox').fadeIn('slow').prepend(msg);
     
    $('#alerts').delay(5000).fadeOut('slow');
     
   }
    
  });
   
  }
   
 })
      
});
 
 
</script>

alerts.php

En este archivo sólo escribir la consulta para insertar los registros y escribir una consulta más para buscar el último registro más tarde tomar un DIV y dar un nombre de ID como #alerts dentro de la div tomar una etiqueta de AUDIO con el archivo de sonido y ponerlo en autoplay true.

<?php
include('db.php');
extract($_REQUEST);
 
$h_name=htmlentities($alert);
$in_name = mysql_real_escape_string($h_name);
 
mysql_query("insert into alerts(message) values('$in_name')");
 
$alerts = mysql_query("select * from alerts order by alertId desc");
$full=mysql_fetch_array($alerts);
?>
<div id="alerts">
 
<audio id="audioplayer" autoplay=true>
    <source src="sound/ping.mp3" type="audio/mpeg">
   <source src="sound/ping.ogg" type="audio/ogg">
  Tu navegador no soporta audio. </audio>
<li>
 
<img src="icons/i.jpg" align="top" style="float:left; margin-right:2px;" />
 
<div><?php echo substr($full['message'],0,100)?></div>
</li>
</div>
jQuery Facebook Notificaciones con sonido
jQuery Facebook Notificaciones con sonido

Bueno aqui les dejo los link de vista previa y descarga.

Demo Descargar

 

Fuente:

Sonido Jquery

¿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.

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