Tutorial | Membuat Sound Notification menggunakan JQuery

Tutorial membuat notification sound ( suara pada saat mengirim pesan/chat). Tutorial ini menggunakan jQuery dan HTML5 audio tag, selain tentunya menggunakan CSS juga biar tampilannya gak "ambyar" :D Oiya, kalo mau download source code-nya, ada di bawah..jadi baca dulu tutorialnya sampai selesai.
Oke gak perlu basa-basi lagi, langsung saja ke contoh source codenya ya :D

Pertama kita siapkan dulu kode HTML nya :

<div id='chatBox'>
<div id='chat'>
<ul id='chatMessages'>
//di bawah ini untuk contoh pesan/chat sebelumnya
<li>
<img src="small.jpg"/><span>Halooo</span>
</li>

</ul>
</div>
<input type="text" id="chatData" placeholder="Message" />
<input type="button" value=" Send " id="trig" />
</div>

Selanjutnta kita kasih script JavaScript, eh maksud saya jQuery :

Terakhir, kita kasih 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
}

Itu tadi tutorial Membuat Sound Notification menggunakan JQuery, semoga bermanfaat. Jika ingin mendownload contoh source code jadi-nya, sila menuju link berikut :