Play Sound On Notification Using JavaScript And CSS.

Friday, Apr 7, 2017

Tags:- JavaScript CSS


In This tutorial we will create a system that play any sound on notification using javascript and css.For eg: Like in facebook whenever someone message you a sound is played automatically to alert you that there is an incoming message.You may also like create notification bar using jQuery.


See Demo
Play Notification Sound


To create a Sound Notification it takes only two steps:-

  1. Make a HTML file and define markup and script for Sound Notification
  2. Make a CSS file and define styling for Sound Notification


Step 1.Make a HTML file and define markup and script for Sound Notification

We have to make a HTML file and named it sound.html

<html>
<head>
  <link rel="stylesheet" type="text/css" href="sound_style.css">
  <script type="text/javascript">
  
    var audio = new Audio('audio_file.mp3');

    function post()
    {
      var tval=document.getElementById("mess").value;	
      var inhtml=document.getElementById("chat_div");
      inhtml.innerHTML=inhtml.innerHTML+"<p class='me'>Me:-"+tval+"</p>";
      inhtml.innerHTML=inhtml.innerHTML+"<p class='demo'>Demo:-Hi! how are you</p>";
      audio.play();
    }

  </script>
</head>

<body>
  
  <h1>Play Sound On Notification Using JavaScript And CSS</h1>
  <div id="chat_div">
    <textarea id="mess">
    </textarea>
    <input type="button" value="Send" onclick="post();">
    <p class="demo">Demo:-Post Something to test Notification Sound</p>
  </div>

</body>
</html>

In this step we create a chat box,as soon as the user post the chat post(); function is called and this will append the the chat to chat box and in return a demo message is also appended to play the notification sound just like in facebook.You may also like create custom audio player using HTML5.


We create an Audio object to load and play the sound file you can play any sound file just by creating object and then use play(); function with object to play the sound.



Step 2.Make a CSS file and define styling for Sound Notification

We make a CSS file and save it with name sound_style.css.

body
{
	background-color:#0B243B;
	text-align:center;
	font-family:helvetica;
}
h1
{
	color:#819FF7;
	margin-top:50px;
	font-size:35px;
}
div
{
	width:300px;
	height:300px;
	border:5px solid green;
	overflow:auto;
	margin-top:50px;
	text-align:left;
}
textarea
{
	width:80%;
	margin:0px;
	float:left;
	height:40px;
}
input[type="button"]
{
margin:0px;
width:20%;
height:40px;
border:none;
background-color:blue;
color:white;
}
p
{
	margin:0px;
}
.me
{
	padding:10px;
	background-color:grey;
}
.demo
{
	padding:10px;
	background-color:silver;
}

Thats all, this is how to Play Sound on Notification System Using JavaScript And CSS.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email