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"> <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>
Bueno aqui les dejo los link de vista previa y descarga.
Demo Descargar
Fuente:
