• Play Notification Sound using Jquery.

    In this blog we describe a simple chat box application using Jquery and HTML5 audio tag. Use Modernizer library for Internet Explorer HTML5 support, please turn on the volume and try this demo.

    JavaScript :-

    Contains javascipt code. $(“#trig”).on(“click”,function(){}- trig is the ID name of the input button. Using $(“#chatData”).attr(“id”) calling text input value.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
    $(function(){
    $("#chatData").focus();
     
    //Appending HTML5 Audio Tag in HTML Body
    $('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>').appendTo('body');
     
    $("#trig").on("click",function(){
    var a = $("#chatData").val().trim();
    if(a.length > 0)
    {
    $("#chatData").val('');
    $("#chatData").focus();
    $("
    	<li></li>
    ").html('<img src="small.jpg"/><span>'+a+'</span>').appendTo("#chatMessages");
    // Scrolling Adjustment 
    $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
    $('#chatAudio')[0].play();
    }
    });
    });
    // ]]></script>

    HTML Code:-

      //Old Messages

    • Hello Friends
    • How are you?

    CSS :-

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    
    * { 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 &gt; ul &gt; li
    {
    padding:3px;
    clear:both;
    padding:4px;
    margin:10px 0px 5px 0px;
    overflow:auto
    }
    #chatMessages
    {
    list-style:none
    }
    #chatMessages &gt; li &gt; img
    { width:35px;float:left
    }
    #chatMessages &gt; li &gt; 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
    }

Comments on this post

Leave a Reply

  • Security Code :


    nine − = 7