Play Notification Sound using Jquery.
Wall Script
Follow Me:
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
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


45 comments:

  1. Great post... Really useful... :)

    ReplyDelete
  2. nice tutorial(y)

    http://santrinulis.com

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

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

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

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

    ReplyDelete
  7. 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
  8. Awesome tutorials...!! Thanks brother.

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

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

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

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

    good day,
    hiren patel

    ReplyDelete
  13. 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
  14. Great Tutorial. Always a fan

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

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

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

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

    http://www.alliedpackers.in/

    ReplyDelete
  19. Hello,

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

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

    ReplyDelete
  21. thank you for script..

    Nice tutorial..

    ReplyDelete
  22. this will work with android ?

    ReplyDelete
  23. no sound with the latest chrome browser

    ReplyDelete
  24. 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
  25. This is very nice. Thanks for this it helps a lot.

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

    ReplyDelete
  27. hello,

    how to save chat in database?

    ReplyDelete
  28. hello,

    but not working on mobile..!

    ReplyDelete

Make in India