9lessons programming blog
Loading Search
9lessons Bring Friends
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
}
Comments
{ 39 comments }
Fareez Ahamed said...

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

F2VM CODER said...

nice tutorial(y)

http://santrinulis.com

suumit shah said...

great job srinivas ! Love'd it

Anonymous said...

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

Balaji said...

Nice post...asusual...

smeeklabs said...

cool man :) great job

Habeb said...

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

Rendra said...

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

Anonymous said...

No sound play on Mozilla Firefox latest version.

sabina said...

nice post....

Anand Hittinali said...

thanks for the tutorial. keep up.

ahmad alkiswanee said...

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

Pradeep said...

Awesome tutorials...!! Thanks brother.

Anonymous said...

ummmm

rana said...

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

Jaydeep Vaniya said...

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

vipul said...

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

Huỳnh Phong Phú said...

awesome code, thanks man !

hiren patel said...

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

good day,
hiren patel

Alexander said...

Great post! Thx!

Anup said...

Great!!!

jehnee said...

thanks working perfect!!!

PHP Application Development said...

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.

Yashwant Chavan said...

Good One

HATAR said...

Nice work.

Anonymous said...

Great Tutorial. Always a fan

PRIYANSHU PARATE said...

very much helpfull

Trisha Agarwal said...

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

Shahid said...

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

grails said...

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

Jack Turner said...

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

http://www.alliedpackers.in/

Alex said...

Hello,

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

Mittul Chauhan said...

that's really cool indeed ..

anuarul islam said...

১০০%

Anonymous said...

Nice tutorial, perfect, simple very good function

suryawijaya said...

thank you for script..

Nice tutorial..

Anonymous said...

thank u

Rahul v r said...

this will work with android ?

wisnu pramono es said...

no sound with the latest chrome browser

Post a Comment