Home > Tips & Tricks > Play a Notification Sound on Websites Using JavaScript

Play a Notification Sound on Websites Using JavaScript

In the web development world, capturing users’ attention and providing timely alerts are very important for web applications like chat applications.

Adding a notification sound to your website can enhance user engagement and ensure important messages don’t go unnoticed. Fortunately, achieving this with JavaScript is straightforward and allows for seamless integration into your web application.

To play a notification sound on your website using JavaScript, follow these simple steps:

  1. Choose or Create Your Notification Sound: Select or create an audio file that suits the tone and purpose of your notifications. Ensure it’s in a widely supported format like MP3 or WAV for compatibility across browsers.
  2. Integrate the Audio File: Store your notification sound file in a directory within your web application’s project folder.
  3. Implement JavaScript Functionality: Utilize JavaScript to trigger the playback of the notification sound when a specific event occurs, such as receiving a new message or completing an action.


var audio = new Audio('audio-file-path');

We will use this Audio object of JavaScript to play a notification sound on websites. we will take an audio file path and pass it to the Audio object to use its constructor and then use the play() method to play it.

Example of Play Notification Sound

Here’s a basic example of playing a notification sound on chat applications websites:

		<title>Play Notification Sound Using JavaScript</title>

		<div class="chat-box-container">
			<h3>Chat Box</h3>

			<ul id="message-box">
				<li><strong>User:</strong> <span class="text">Hello, How Are You?</span></li>
			<form id="form1">
				<input type="text" name="name" placeholder="Enter Name" required="required" width="50%" id="name"> 
				<input type="text" name="message" placeholder="Enter Message" required="required" width="50%" id="message">
				<button type="button" id="submit-btn">Submit</button>
	// Define the path to your notification sound file
	const notificationSoundPath = 'notification.mp3';

	// Function to play the notification sound
	function playNotificationSound() {
	  // Create a new Audio object
	  const audio = new Audio(notificationSoundPath);
	  // Play the audio
	const submitBtn =document.getElementById('submit-btn');
	submitBtn.addEventListener('click', function() {
		var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        if(name.trim() == '' || message.trim() == '') {
            alert("Please enter required fields");
            return false;
	  	document.getElementById("message-box").append("<li><strong>" + name + ":</strong> <span class="text">" + message + "</span></li>");
		document.getElementById("message").value = "";

Remember to adjust the event listener and trigger according to your website’s specific requirements and user interactions. With this simple implementation, you can effectively play notification sounds on your website and enhance user engagement.

Being Tricky 😉


Why add notification sounds?

Notification sounds enhance user experience by providing immediate feedback and alerting users to important events on your website, improving engagement and retention.

Any best practices for implementing notification sounds?

Use sparingly for key events.
Offer customization options.
Choose pleasant, relevant sounds.
Test across devices and browsers.
Provide visual indicators alongside audio cues.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment