He recibido un montón de solicitudes para realizar un tutorial sobre cómo reproducir sonidos en una notificación en un sistema de chat web. Y fijate, que os he hecho caso. Para ello, en este artículo, he implementado una simple aplicación de chat, y para los sonidos he utilizado jQuery y el tag de audio de HTML5. Para los más novatos en esto de la programación he de deciros que este tutorial no es para nada complicado.
Ah, se me olvida deciros que también he utilizado la librería Modernizr para que el sistema sea soporta por las versiones antiguas de Internet Explorer. Vamos a empezar, por favor, sube el volumen y dale duro al código.
Javascript
En la sentencia $("#trig").on("click",function(){}, trig es el id del input button. Utilizando $("#chatData").attr("id") obtendremos el texto del valor del input.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#chatData").focus();
//Appending HTML5 Audio Tag in HTML Body
$('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>').appendTo('body');
$("#trig").on("click",function(){
var a = $("#chatData").val().trim();
if(a.length > 0)
{
$("#chatData").val('');
$("#chatData").focus();
$("<li></li>").html('<img src="small.jpg"/><span>'+a+'</span>').appendTo("#chatMessages");
// Scrolling Adjustment
$("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
$('#chatAudio')[0].play();
}
});
});
</script>
Codigo HTML
Plantilla que utilizaremos para este sistema
<div id='chatBox'>
<div id='chat'>
<ul id='chatMessages'>
//Old Messages
<li>
<img src="small.jpg"/><span>Hello Friends</span>
</li>
<li>
<img src="small.jpg"/><span>How are you?</span>
</li>
</ul>
</div>
<input type="text" id="chatData" placeholder="Message" />
<input type="button" value=" Send " id="trig" />
</div>
CSS
* { padding:0px; margin:0px; }
body{font-family:arial;font-size:13px}
#chatBox
{
width:400px;
border:1px solid #000;
margin:5px;
}
#chat
{
max-height:220px;
overflow-y:auto;
max-width:400px;
}
#chat > ul > li
{
padding:3px;
clear:both;
padding:4px;
margin:10px 0px 5px 0px;
overflow:auto
}
#chatMessages
{
list-style:none
}
#chatMessages > li > img
{ width:35px;float:left
}
#chatMessages > li > span
{
width:300px;
float:left;
margin-left:5px
}
#chatData
{
padding:5px;
margin:5px;
border-radius:5px;
border:1px solid #999;
width:300px
}
#trig
{
padding: 4px;
border: solid 1px #333;
background-color: #133783;
color:#fff;
font-weight:bold
}
Fuente: lessons9.info