Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to play a notification sound on websites?
Nowadays, web development continues to evolve and find new ways to improve the user experience. One way to improve the user's experience is by adding notifications to the website to notify users of any event.
Before we start with the tutorial, let's understand why we need notifications with sounds on the website.
Why Add Notification Sounds?
As we said above, notification is used to enhance the user experience. We can use it to notify users for a task, such as when users completes the form submission, get a message in the chat app, for reminders, etc.
If users are away from their devices, it is hard for them to know that they are notified. So, we should add a play sound when users receive any notification. Even it would help users if developers can add different sounds for different notifications.
In this tutorial, we will learn to use JavaScript and jQuery to play audio while users receive notifications.
Syntax
Users can follow the syntax below to use the Audio() constructor to play notification sound.
var audio = new Audio(URL); audio.play();
In the above syntax, the URL is the audio URL that we want to play when users receive a notification.
Using JavaScript
In the example below, we used basic JavaScript to play audio. When users click the button, it executes the playSound() function. In the playSound() function, we create the audio object by passing the audio URL as a parameter. After that, we use the play() method to play the audio.
<html>
<body>
<h2>Adding the <i>notification sound</i> to webpage using JavaScript</h2>
<button onclick="playSound()">Play notification sound</button>
<script>
function playSound() {
var audio = new Audio('/html/test_sound.mp3');
audio.play();
}
</script>
</body>
</html>
Using jQuery
In the example below, we use jQuery to play audio sound. Here, we create the button and assign the 'btn' id. In jQuery, we access the button using the id and add the 'click' event listener.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.js"></script>
</head>
<body>
<h2>Adding the <i>notification sound</i> to webpage using jQuery</h2>
<button id="btn">Play notification sound</button>
<script>
// play notification sound
$("#btn").click(function () {
var audio = new Audio('/html/test_sound.mp3');
audio.play();
});
</script>
</body>
</html>
Using HTML Audio Element
In this example, we append the '<audio>' tag to the HTML from JavaScript. We create the '<source>' tag and add the 'src' attribute with the audio URL as a value in JavaScript. After that, we assign it to the 'mp3' variable. Also, we prepare a string containing the '<audio>' tag and value of the 'mp3' variable, which we add as innerHTML of the div element with the 'sound' id.
As we add the 'autoplay' attribute in the '<audio>' tag, the audio starts playing when we append it to the DOM.
<html>
<body>
<h2>Adding the <i>notification sound</i> to webpage using JavaScript</h2>
<div id="sound"></div>
<button onclick="playSound()">Play notification sound</button>
<script>
function playSound() {
var mp3 = '<source src="/html/test_sound.mp3" type="audio/mpeg">';
document.getElementById("sound").innerHTML =
'<audio autoplay="autoplay">' + mp3 + '</audio>';
}
</script>
</body>
</html>
Handling Audio Errors
When working with audio files, it's important to handle errors gracefully. Here's an improved version that includes error handling:
<html>
<body>
<h2>Notification sound with error handling</h2>
<button onclick="playNotificationSound()">Play notification sound</button>
<script>
function playNotificationSound() {
var audio = new Audio('/html/test_sound.mp3');
audio.addEventListener('canplay', function() {
console.log('Audio loaded successfully');
});
audio.addEventListener('error', function(e) {
console.log('Error loading audio file:', e);
alert('Could not play notification sound');
});
audio.play().catch(function(error) {
console.log('Playback failed:', error);
});
}
</script>
</body>
</html>
Key Points
- The Audio() constructor is the most common method to play notification sounds
- jQuery provides an alternative approach for handling click events
- HTML audio elements with autoplay can be dynamically added to the DOM
- Always include error handling for better user experience
- Modern browsers may block autoplay without user interaction
Conclusion
We learned three different methods of playing notification sounds on websites. The Audio() constructor with JavaScript is the most flexible approach, while jQuery provides cleaner event handling. Always include error handling to ensure a smooth user experience when audio files fail to load.
8K+ Views
