✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Play Sound On Notification Using JavaScript And CSS

Last Updated : Jul 1, 2023

IN - JavaScript CSS | Written & Updated By - Amruta

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.

Play Sound On Notification Using JavaScript And CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on play notification sound JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →