Bu makalede web sayfamızda nasıl bildirim seslerini kullanabileceğimize bakalım.Bildirim seslerine örnek vermek gerekirse facebook’da chatleşirken gelen sohbet seslerini gösterebiliriz.Biz de bunu basit bir chat kutusuyla Jquery ve HTML5′in audio etiketini kullanarak oluşturacağız.Makale sonunda kendi hazırladığınız şablonu test etmek için bilgisayarınızın sesinin açık olduğundan ve tarayıcınızın HTML5′i desteklediğinden emin olun ..
JavaScript
Öncelikle ses dosyalarımızı çağırdık.Javascript kodunun içinde gördüğünüz gibi #trig id sine sahip butonun click eventine gerekli kodlarımızı ekledik.Senaryomuza göre gönder tuşuna tıklandığında mesaj kutusunun içindeki değerin boş olup olmadığı kontrol edilecek ve bir mesaj varsa üst taraftaki chat divimize eklenecek.Bu ekleme yapıldıtkan sonra $(‘#chatAudio’)[0].play(); koduyla sesimiz çalıcak.
JavaScript
Öncelikle ses dosyalarımızı çağırdık.Javascript kodunun içinde gördüğünüz gibi #trig id sine sahip butonun click eventine gerekli kodlarımızı ekledik.Senaryomuza göre gönder tuşuna tıklandığında mesaj kutusunun içindeki değerin boş olup olmadığı kontrol edilecek ve bir mesaj varsa üst taraftaki chat divimize eklenecek.Bu ekleme yapıldıtkan sonra $(‘#chatAudio’)[0].play(); koduyla sesimiz çalıcak.
Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
$(function(){
$("#chatData").focus();
//HTML5 audio etiketini kullanarak ses dosyalarımızı include ettik
$('<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");
// Scroll ayarı
$("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
$('#chatAudio')[0].play();
}
});
});
// ]]></script>
Kod:
<div id="chatBox">
<div id="chat">
<ul>
<ul>//Eski Mesajlar</ul>
</ul>
<ul id="chatMessages">
<li><img alt="" src="small.jpg" /><span>Merhaba</span></li>
<li><img alt="" src="small.jpg" /><span>Nasılsın ? </span></li>
</ul>
</div>
<input id="chatData" type="text" placeholder="Mesajınız" />
<input id="trig" type="button" value=" Gönder " /></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;
}