Membuat Notifikasi Suara Menggunakan jQuery

Membuat Notifikasi Suara Menggunakan jQuery

Pada kesempatan kali ini saya akan membahas tentang cara Membuat Notifikasi Suara Menggunakan jQuery. Dimana suara akan muncul ketika kita mengirimkan pesan.

Langkah pertama untuk Membuat Notifikasi Suara Menggunakan jQuery adalah teman-teman buat struktur html seperti pada script di bawah ini.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Membuat Notifikasi Suara Menggunakan jQuery</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

                <div style='margin:0 auto;width:600px;padding:10px;'>

                                <h1 align="center">Membuat Notifikasi Suara Menggunakan jQuery</h1>

    <div id='kotakChat' style='margin:20px auto 0 auto'>

        <h3>Online Chat Dumet School</h3>

        <div id='chat'>

            <ul id='pesanChat'>

                <li>

                                <img src="pp.png"/>

                    <span>Hallo, Selamat Datang di Dumet School !</span>

                </li>

            </ul>

        </div>

                <input type="text" id="dataChat" placeholder="Pesan" />

                <input type="button" value="Kirim" id="kirim" />

    </div>

    </div>

</body>

</html>

Jika sudah maka teman-teman buat scriptnya untuk membuat notifikasi suaranya seperti berikut ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

$(function(){ 

                $("#dataChat").focus();

                $('<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');

                $("#kirim").on("click",function(){

                                var a = $("#dataChat").val().trim();

                                if(a.length > 0){

                                                $("#dataChat").val('');

                                                $("#dataChat").focus();

                                                $("<li></li>").html('<img src="pp.png"/><span>'+a+'</span>').appendTo("#pesanChat");

                                                $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");

                                                $('#chatAudio')[0].play();

    }

  });

});

</script>

Lalu buat file baru untuk memberikan style cssnya seperti berikut ini.

* {

                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;

}

Jika ditampilkan dihalaman browser maka akan seperti pada gambar di bawah ini.

Demikian artikel tentang cara Membuat Notifikasi Suara Menggunakan jQuery. Semoga bermanfaat dan selamat mencoba.