NOTIFIKASI SUARA UNTUK APLIKASI CHAT

[RayMantic]

[hide]
LINK DEMO


Langkah 1
Buatlah sebuah inputan chatting sederhana beserta bagian untuk menampilkan setiap pesan.

HTML

<div id=’kotakChat’ style=’margin:20px auto 0 auto’>
<h3>Demo Chatting ePlusGo</h3>
<div id=’chat’>
<ul id=’pesanChat’>
<li>
<img src="pp.png"/>
<span>Hallo sobat</span>
</li>
<li>
<img src="pp.png"/>
<span>Apa kabar, sehatkah ?</span>
</li>
</ul>
</div>
<input type="text" id="dataChat" placeholder="Pesan" />
<input type="button" value="Kirim" id="kirim" />
</div>

CSS

* {
   padding:0px;
    margin:0px;
}

body{
   font-family:arial;
  font-size:13px;
}

#kotakChat {
    width:380px;
    border:1px solid #f0f0f0;
   margin:5px;
}

#kotakChat > h3 {
    background-color:rgb(59, 89, 152);
  padding:7px;
    color:#fff;
}

#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;
}

#pesanChat{
  list-style:none
 }

#pesanChat > li > img { 
 width:35px;
 float:left;
}

#pesanChat > li > span {
  width:300px;
    float:left;
 margin-left:5px
}

#dataChat {
 margin:5px;
 height:26px;
    width:300px;
    border:1px solid #CCC;
  font-size:14px;
 background:#ffffff; 
    padding:3px;
    border-radius:3px;
}

#kirim {
 background:rgb(59, 89, 152);
    color:#fff;
 -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
 border-radius: 3px;
 cursor: pointer;
    display: inline-block;
  font-size: 14px;
    margin-right: 5px;
  padding: 6px;
   border:1px solid #999;
}

Catatan
Pada desain diatas, ada 2 bagian penting yang harus diperhatikan :
1. #chat : Bagian ini digunakan untuk menampilkan setiap pesan yang diinput.
2. #dataChat : Bagian ini digunakan untuk menginputkan pesan.

Langkah 2
Selanjutnya, tuliskan perintah jQuery untuk menjalankan fungsi chat. (Penjelasan disertakan disetiap perintah).

$(function(){
$("#dataChat").focus();
//Mendefinisikan tag audio (HTML5) ke dalam HTML. Audio ini yang digunakan sebagai suara notifikasi.
//Terdapat 3 audio yang di includekan, dan masing-masing memiliki format yang berbeda yaitu .ogg, .mp3, dan .wav
$(‘<audio id="chatAudio"><source src="notifikasi.ogg" type="audio/ogg"><source src="notifikasi.mp3" type="audio/mpeg"><source src="notifikasi.wav" type="audio/wav"></audio>’).appendTo(‘body’);

//Fungsi ketika tombol kirim diklik
$("#kirim").on("click",function(){
var a = $("#dataChat").val().trim();
if(a.length > 0){ // Jika ada karakter (diatas 0) yang diketik di inputan chat, jalankan fungsi dibawah
$("#dataChat").val(”); // Kosongkan inputan chat
$("#dataChat").focus(); // Fokuskan kursor di inputan chat
$("<li></li>").html(‘<img src="pp.png"/><span>’+a+’</span>’).appendTo("#pesanChat");// Tampilkan pesan yang diinput
$("#chat").animate({"scrollTop": $(‘#chat’)[0].scrollHeight}, "slow"); // Berikan animasi scroll pada pesan
$(‘#chatAudio’)[0].play(); // Terakhir, jalankan audio yang di includekan diatas
}
});
});

Aplikasi notifikasi suara ini bekerja menggunakan jQuery. Bagi Anda yang berniat membuat aplikasi chat, tidak ada salahnya untuk menambahkan fitur notifikasi suara. Tentunya Anda dapat mengembangkan aplikasi ini lebih lanjut sesuai dengan kreasi Anda. [/hide]