How to play a notification sound on websites

Question

When a certain event occurs  I want my website to play a short notification sound to the user   The sound should not auto-start  instantly  when the website is opened  Instead  it should be played on demand via JavaScript  when that certain event occurs    It is important that this also works on older browsers  IE6 and such    So  basically there are two questions    What codec should I use  What s best practice to embed the audio file    lt embed gt  vs   lt object gt  vs  Flash vs   lt audio gt

User · Answer

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

User · Answer

if you want to automate the process via JS  Include somewhere in the html   lt button onclick  quot playSound    quot  id  quot soundBtn quot  gt Play lt  button gt     and hide it via js    lt script type  quot text javascript quot  gt   document getElementById  soundBtn   style visibility  hidden    function performSound    var soundButton   document getElementById  quot soundBtn quot    soundButton click       function playSound           const audio   new Audio  quot alarm mp3 quot          audio play            lt  script gt   if you want to play the sound just call performSound   somewhere

User · Answer

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

User · Answer

Play cross browser compatible notifications  As adviced by  Tim Tisdall from this post   Check Howler js Plugin   Browsers like chrome disables javascript execution when minimized or inactive for performance improvements  But This plays notification sounds even if browser is inactive or minimized by the user     var sound  new Howl                        src       sounds rings mp3      sounds rings wav      sounds rings ogg                                  sounds rings aiff                         autoplay  true                       loop  true                                         sound play      Hope helps someone

User · Answer

if you want calling event on the code The best way to do that is to create trigger because the browser will not respond if the user is not on the page   lt button type  button  style  display none  id  playSoundBtn  onclick  playSound     gt  lt  button gt    now you can trigger your button when you want to play sound       playSoundBtn   trigger  click

User · Answer

2021 solution function playSound url      const audio   new Audio url     audio play        lt button onclick  quot playSound  https   your-file mp3    quot  gt Play lt  button gt     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     lt source src  quot     filename     mp3 quot  type  quot audio mpeg quot  gt      var oggSource     lt source src  quot     filename     ogg quot  type  quot audio ogg quot  gt      var embedSource     lt embed hidden  quot true quot  autostart  quot true quot  loop  quot false quot  src  quot     filename    mp3 quot  gt      document getElementById  quot sound quot   innerHTML   lt audio autoplay  quot autoplay quot  gt     mp3Source   oggSource   embedSource     lt  audio gt        lt button onclick  quot playSound  bing    quot  gt Play lt  button gt     lt div id  quot sound quot  gt  lt  div gt   Browser support   lt audio gt   Modern browsers   lt embed gt   Fallback   Codes used  MP3 for Chrome  Safari and Internet Explorer  OGG for Firefox and Opera

User · Answer

var audio   new Audio  audio file mp3     function post       var tval document getElementById  mess   value       var inhtml document getElementById  chat div      inhtml innerHTML inhtml innerHTML   lt p class  me  gt Me -  tval   lt  p gt      inhtml innerHTML inhtml innerHTML   lt p class  demo  gt Demo -Hi  how are you lt  p gt      audio play        this code is from talkerscode For complete tutorial visit http   talkerscode com webtricks play-sound-on-notification-using-javascript-and-php php

User · Answer

Use the audio js which is a polyfill for the  lt audio gt  tag with fallback to flash   In general  look at https   github com Modernizr Modernizr wiki HTML5-Cross-Browser-Polyfills for polyfills to the HTML 5 APIs    it includes more  lt audio gt  polyfills

User · Answer

We can just use Audio and an object together like   var audio       audio  ubuntu     new Audio    audio  ubuntu   src  start ogg   audio  ubuntu   play      and even adding addEventListener for play and ended

User · Answer

How about the yahoo s media player Just embed yahoo s library    lt script type  text javascript  src  http   mediaplayer yahoo com js  gt  lt  script gt     And use it like   lt a id  beep  href  song mp3  gt Play Song lt  a gt    To autostart    function         beep   click

User · Answer

I wrote a clean functional method of playing sounds   sounds         test   new Audio   assets sounds test mp3       sound volume   0 1   function playSound sound        sounds sound  volume   sound volume      sounds sound  play      function stopSound sound        sounds sound  pause      function setVolume sound  volume        sounds sound  volume   volume      sound volume   volume

[javascript] How to play a notification sound on websites?

Examples related to javascript

Examples related to html

Examples related to audio

Examples related to notifications

Examples related to html5-audio