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 wanted to play while users receive a notification.

Example 1 (Using the JavaScript)

In the example below, we used the basic JavaScript to play audio. When users click the button, it executes the playSound() function. In the playSound() function, we created the audio object by passing the audio URL as a parameter. After that, we used the play() method to play the audio.

In the output, users can click the button to play audio sound. In the real-time application, we can execute the functions like playSound() when users receive a notification to play 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('http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_shoot.wav');
         audio.play();
         }
      </script>
</html>

Example 2

In the example below, we used Jquery to play audio sound. Here, we created the button and assigned the ‘btn’ id. In Jquery, we access the button using the id and add the ‘click’ event listener.

It creates the audio object and plays it using the play() method when users click the button, which users can test in the output.

<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('http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg');
      audio.play();
      });
   </script>
</html>

Example 3 (Appending audio to the HTML)

In this example, we append the ‘<audio>’ tag to the HTML from JavaScript. We created the ‘<source>’ tag and added the ‘src’ attribute with the audio URL as a value in JavaScript. After that, we assigned it to the ‘mp3’ variable. Also, we prepared a string containing the ‘<audio>’ tag and value of the ‘mp3’ variable, which we added as an inner HTML of the div element with the ‘sound’ id.

As we added the ‘autoPlay’ attribute in the ‘<audio>’ tag, it 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="http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg" type="audio/mpeg">';
         document.getElementById("sound").innerHTML =
         '<audio autoplay="autoplay">' + mp3 + "</audio>";
         }
      </script>
</html>

Conclusion

We learned three different examples of playing an audio sound. In the first example, we used JavaScript; in the second, we used Jquery. In the third example, we append the ‘<audio>’ tag to the DOM using JavaScript with the ‘autoPlay’ attribute.

However, we learned to play only audio, but developers can execute the function while getting the notification to play audio.

Updated on: 17-May-2023

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements