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.

Membuat Notifikasi Suara Menggunakan jQuery

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

7 Juli 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat