How to play a notification sound on websites?

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

• <audio> (Modern browsers)
• <embed> (Fallback)

Codes used

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

As of 2016, the following will suffice (you don't even need to embed):

let src = 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3';let audio = new Audio(src);audio.play();

See more here.

One more plugin, to play notification sounds on websites: Ion.Sound

• Basic Demo
• Advanced Demo
• Ion.Sound GitHub Page

Advantages:

• JavaScript-plugin for playing sounds based on Web Audio API with fallback to HTML5 Audio.
• Plugin is working on most popular desktop and mobile browsers and can be used everywhere, from common web sites to browser games.
• Audio-sprites support included.
• No dependecies (jQuery not required).
• 25 free sounds included.

Set up plugin:

// set up configion.sound({    sounds: [        {            name: "my_cool_sound"        },        {            name: "notify_sound",            volume: 0.2        },        {            name: "alert_sound",            volume: 0.3,            preload: false        }    ],    volume: 0.5,    path: "sounds/",    preload: true});// And play sound!ion.sound.play("my_cool_sound");