How to play a notification sound on websites?

by

2021 solution

function playSound(url) {
  const audio = new Audio(url);
  audio.play();
}

<button onclick="playSound('https://your-file.mp3');">Play</button>

Browser support

Edge 12+, Firefox 20+, Internet Explorer 9+, Opera 15+, Safari 4+, Chrome

Codecs Support

Just use MP3

Old solution

(for legacy browsers)

function playSound(filename){
  var mp3Source="<source src="" + filename + '.mp3" type="audio/mpeg">';
  var oggSource="<source src="" + filename + '.ogg" type="audio/ogg">';
  var embedSource="<embed hidden="true" autostart="true" loop="false" src="" + filename +'.mp3">';
  document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
}

<button onclick="playSound('bing');">Play</button>  
<div id="sound"></div>

Browser support

Codes used

  • MP3 for Chrome, Safari and Internet Explorer.
  • OGG for Firefox and Opera.

More Related Contents:

  1. html5 display audio currentTime
  2. HTML5 audio playlist – how to play a second audio file after the first has ended?
  3. How to set the loudness of HTML5 audio?
  4. How to play audio?
  5. HTML5 record audio to file
  6. HTML5 audio streaming: precisely measure latency?
  7. Sound effects in JavaScript / HTML5
  8. HTML 5 video or audio playlist
  9. Node.js can’t create Blobs?
  10. How to prevent “The play() request was interrupted by a call to pause()” error?
  11. HTML5 Audio Looping
  12. HTML5 check if audio is playing?
  13. Why don’t audio and video events bubble?
  14. change src with javascript
  15. HTML5 Audio tag on Safari has a delay
  16. How to mute all sound in a page with JS?
  17. HTML 5 – Play file at certain time point
  18. HTML5 playback with fade in and fade out
  19. gapless looping audio html5
  20. How to capture generated audio from window.speechSynthesis.speak() call?
  21. How to play only the audio of a Youtube video using HTML 5?
  22. How can I add multiple sources to an HTML5 audio tag, programmatically?
  23. HTML5 Audio can’t play through Javascript unless triggered manually once
  24. How to toggle audio play() pause() with one button or link?
  25. How to check if HTML5 audio has reached different errors
  26. Javascript make audio blob
  27. “Autoplay” HTML5 audio player on mobile browsers
  28. Generating sound on the fly with javascript/html5
  29. how to get audio.duration value by a function
  30. HTML5 Notification not working in Mobile Chrome

Leave a Comment