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.
Download Script
Live DemoDeveloper
Arun Kumar Sekar
Engineer, Plugin Expert
Chennai, INDIA
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>
<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>
<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
}
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
}
Great post... Really useful... :)
ReplyDeletenice tutorial(y)
ReplyDeletehttp://santrinulis.com
great job srinivas ! Love'd it
ReplyDeleteok, i request you to make it in pure JAVASCRIPT and HTML4
ReplyDeleteNice post...asusual...
ReplyDeletecool man :) great job
ReplyDeleteNice man but enter key execution is not working...if it is work it will be great.Cheers.
ReplyDeletegreat tutorial :)
ReplyDeleteit's what i need...
thank you
No sound play on Mozilla Firefox latest version.
ReplyDeletenice post....
ReplyDeletethanks for the tutorial. keep up.
ReplyDeletegood 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 ..
ReplyDeletei 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
Awesome tutorials...!! Thanks brother.
ReplyDeleteummmm
ReplyDeleteGreat, thanks. It was very easy to follow :)
ReplyDeletethankss dude .. really very useful for me :) .. n always keep it up .. these are very useful for guys such kind of me..
ReplyDeleteits a good tutorial. I was thinking the same things for one of my project. You saved my time thank you..
ReplyDeleteawesome code, thanks man !
ReplyDeletehi,
ReplyDeleteits really great post.
i was looking for the same solution.
good day,
hiren patel
Great post! Thx!
ReplyDeleteGreat!!!
ReplyDeletethanks working perfect!!!
ReplyDeleteHey 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.
ReplyDeleteGood One
ReplyDeleteNice work.
ReplyDeleteGreat Tutorial. Always a fan
ReplyDeletevery much helpfull
ReplyDeletethis is awesome, I like this article, thank u for share it.
ReplyDeleteHTML5 brings lot of features with it using hardware access...this is one of awesome implementation.
ReplyDeletedo i need to have all formats? ogg, mp3 and wav?
ReplyDeleteU have done a great job guys... u always rocks...thnx fr ur all posts....
ReplyDeletehttp://www.alliedpackers.in/
Hello,
ReplyDeleteYeah! This is an easy way to play sound with jQuery.
that's really cool indeed ..
ReplyDelete১০০%
ReplyDeleteNice tutorial, perfect, simple very good function
ReplyDeletethank you for script..
ReplyDeleteNice tutorial..
thank u
ReplyDeletethis will work with android ?
ReplyDeleteno sound with the latest chrome browser
ReplyDeletecan you explain me this code plz $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
ReplyDelete$('#chatAudio')[0].play();
why [0] after $('#chatAudio') and $('#chat')
Thank you
This is very nice. Thanks for this it helps a lot.
ReplyDeleteThank you cery much for this script & Tutorial :)
ReplyDeleteGreat!!!
ReplyDeleteGood
hello,
ReplyDeletehow to save chat in database?
hello,
ReplyDeletebut not working on mobile..!
You rock!!! Thanks...
ReplyDeleteNice tutorial and demo :)
ReplyDeleteI 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!
Very useful for me. Thanks
ReplyDelete