Membuat Notifikasi Suara Facebook dengan jQuery

Bagi Anda yang sering menggunakan fasilitas chatting di Facebook, tentu tidak asing lagi dengan notifikasi suara pada fasilitas chat-nya bukan ? Suara notifikasi ini akan sangat membantu, jika kita sedang disibukkan dengan aktifitas sehari-hari.

Pada tutorial ini, kita akan coba membuat sebuah notifikasi suara sederhana seperti layaknya di chattingan Facebook menggunakan jQuery. Pada dasarnya, konsep kerja notifikasi ini sangat simple. Dengan bantuan jQuery kita akan mengecek apakah ada karakter yang dituliskan pada inputan chat atau tidak. Jika ada dan user menekan tombol kirim maka suara notifikasi akan dijalankan.

Untuk lebih jelasnya silahkan coba demo dibawah.

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

Kesimpulan

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. Selamat mencoba.