DEV Community

Cover image for Notification with Audio in JavaScript
Walter Nascimento
Walter Nascimento

Posted on

Notification with Audio in JavaScript

[Clique aqui para ler em português]

We always need a feedback to our user about some information, whether it’s a finalized registration or something removed, and today one of the best ways to give feedback to our users is with notification, so let’s create a notification using javascript and stay more professional we will add an audio whenever the notification is called.

Code

First let’s create the interface, we’ll do something simple, using just HTML.

<button>Click here</button>
Enter fullscreen mode Exit fullscreen mode

To display our notification, let’s just create one button.

const buttonEl = document.querySelector("button");

const title = "Success";
const msg = "Message";
const icon = "https://via.placeholder.com/50x50";
const song = "notification.mp3";

buttonEl.addEventListener("click", notifyMe);

function notifyMe() {
  if (!("Notification" in window)) {
    alert("This browser does not support Desktop notifications");
  }
  if (Notification.permission === "granted") {
    callNotify(title, msg, icon);
    return;
  }
  if (Notification.permission !== "denied") {
    Notification.requestPermission((permission) => {
      if (permission === "granted") {
        callNotify(title, msg, icon);
      }
    });
    return;
  }
}

function callNotify(title, msg, icone) {
  new Notification(title, { body: msg, icon: icone });
  new Audio(song).play();
}
Enter fullscreen mode Exit fullscreen mode

In our javascript code we have our constants that have the message title, the message an icon and an audio file.

For the notification, a function called notifyMe was created that will be executed whenever we click on the button.

In the notifyMe function, we first check if the browser supports notification, then we check if the user has already allowed to be notified, and if not, then we check if he hasn’t denied it either, and then the notification api itself makes the request to the user checking whether or not he authorizes the sending of notification.

Finally, we have the callNotify function in which the notification is displayed with the title message and icon that we defined, and we still use the browser’s own audio api so that whenever this function is called, play in the audio file.

ready simple like that.

Demo

See below for the complete working project.

if you can't see it click here and see the final result

Youtube

If you prefer to watch it, see the development on youtube.


Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊


Support Me

Youtube - WalterNascimentoBarroso
Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso

Top comments (4)

Collapse
 
majidnoorali profile image
MajiD

what if user has multiple tabs of your web app open ? then there will be multiple sounds playing. any solution for the issue ?

Collapse
 
walternascimentobarroso profile image
Walter Nascimento

Sorry, i lost your commets.

I don't have any solution for this in this moment, if i find i will put here ;)

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Not available on mobile, so sad 😔

Collapse
 
walternascimentobarroso profile image
Walter Nascimento

Yes, i couldn't make it run on my phone, only on the desktop

but on the mozzila website it says it depends on the version, read more here

developer.mozilla.org/pt-BR/docs/W...