Play Notification Sound using Jquery.
Wall Script
Wall Script
Monday, April 15, 2013

Play Notification Sound using Jquery.

I received lots tutorial requests from my readers that asked to me, how to play a notification sound on website chat?. We implemented this in a simple chat box application using Jquery and HTML5 audio tag, it is just five lines of code. Use Modernizer library for Internet Explorer HTML5 support, please turn on the volume and try this live demo.

Play Notification Sound using Jquery.


Download Script     Live Demo

Developer
Arun Kumar Sekar
Arun Kumar Sekar

Engineer, Plugin Expert
Chennai, INDIA

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.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(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
Simple HTML code.
<div id='chatBox'>
<div id='chat'>
<ul id='chatMessages'>
//Old Messages
<li>
<img src="small.jpg"/><span>Hello Friends</span>
</li>
<li>
<img src="small.jpg"/><span>How are you?</span>
</li>

</ul>
</div>
<input type="text" id="chatData" placeholder="Message" />
<input type="button" value=" Send " id="trig" />
</div>

CSS
* { 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 > ul > li
{
padding:3px;
clear:both;
padding:4px;
margin:10px 0px 5px 0px;
overflow:auto
}
#chatMessages
{
list-style:none
}
#chatMessages > li > img
{ width:35px;float:left
}
#chatMessages > li > 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
}
web notification

48 comments:

  1. nice tutorial(y)

    http://santrinulis.com

    ReplyDelete
  2. ok, i request you to make it in pure JAVASCRIPT and HTML4

    ReplyDelete
  3. Nice man but enter key execution is not working...if it is work it will be great.Cheers.

    ReplyDelete
  4. great tutorial :)
    it's what i need...
    thank you

    ReplyDelete
  5. No sound play on Mozilla Firefox latest version.

    ReplyDelete
  6. good job . thank you but i want to ask you how i can link this script to a MySQL so when we have new row this sound well turn on ..
    i have an optical notification system so when the member have a news message the unread message counter will change from zero to the new number
    using a load () function in ajax .. but i need to turn this sound on if the number of new sms not equal to zero

    ReplyDelete
  7. Awesome tutorials...!! Thanks brother.

    ReplyDelete
  8. Great, thanks. It was very easy to follow :)

    ReplyDelete
  9. thankss dude .. really very useful for me :) .. n always keep it up .. these are very useful for guys such kind of me..

    ReplyDelete
  10. its a good tutorial. I was thinking the same things for one of my project. You saved my time thank you..

    ReplyDelete
  11. hi,
    its really great post.
    i was looking for the same solution.

    good day,
    hiren patel

    ReplyDelete
  12. Hey Arun kumar you have shared very helpful thing. It’s really a cool and helpful piece of information. I’m glad that you shared this useful info with us. Please keep us informed like this. Thanks for sharing.

    ReplyDelete
  13. Great Tutorial. Always a fan

    ReplyDelete
  14. this is awesome, I like this article, thank u for share it.

    ReplyDelete
  15. HTML5 brings lot of features with it using hardware access...this is one of awesome implementation.

    ReplyDelete
  16. do i need to have all formats? ogg, mp3 and wav?

    ReplyDelete
  17. U have done a great job guys... u always rocks...thnx fr ur all posts....

    http://www.alliedpackers.in/

    ReplyDelete
  18. Hello,

    Yeah! This is an easy way to play sound with jQuery.

    ReplyDelete
  19. Nice tutorial, perfect, simple very good function

    ReplyDelete
  20. thank you for script..

    Nice tutorial..

    ReplyDelete
  21. this will work with android ?

    ReplyDelete
  22. no sound with the latest chrome browser

    ReplyDelete
  23. can you explain me this code plz $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
    $('#chatAudio')[0].play();

    why [0] after $('#chatAudio') and $('#chat')

    Thank you

    ReplyDelete
  24. This is very nice. Thanks for this it helps a lot.

    ReplyDelete
  25. Thank you cery much for this script & Tutorial :)

    ReplyDelete
  26. hello,

    how to save chat in database?

    ReplyDelete
  27. hello,

    but not working on mobile..!

    ReplyDelete
  28. Nice tutorial and demo :)
    I wonder if this can be applied to CodeIgniter?
    I don't write codes from scratch so I need to find out if I can pass this information to my web developers.

    Thank you!

    ReplyDelete

mailxengine Youtueb channel
Make in India
X