Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to play a notification sound on websites?

People also ask

How do I play sound from a website?

An easy way to embed audio on a website is by using a sound hosting site, such as SoundCloud or Mixcloud. All you need to do is upload the file and receive an HTML embed code. Then copy and paste the embed code into the web page's code or WYSIWYG site editor. This works for most CMS platforms and website builders.

How do I change the notification sound on my browser?

Enter through 'Settings' > 'Apps and Notifications' > 'Notifications' > 'Notifications' . Then scroll down to Chrome and tap on it. You can then choose for which action Chrome will notify you and which sound you would like it to play by tapping on the individual choices i.e. Downloads, Sites etc.

How do I add sound to onclick in HTML?

Using Onclick Event in Javascript: The onclick event fires the function when the user clicks on the button. In the following code, the play1 function is associated with onclick event. Function play1 receives the name of the audio file, then we select division with id=sound and inserts an HTML containing the audio tag.


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 config
ion.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");

How about the yahoo's media player Just embed yahoo's library

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> 

And use it like

<a id="beep" href="song.mp3">Play Song</a>

To autostart

$(function() { $("#beep").click(); });