How do I make JavaScript beep

Question

I want my web page to beep whenever a user exceeds the maximum character limit of my  lt textarea gt

User · Answer

You need a sound file to be served from somewhere   Here s the code from Scriptaculous s Sound library     Default   lt embed style  height 0  id  sound   track    id   src    url   loop  false  autostart  true  hidden  true   gt     For Gecko  if Prototype Browser Gecko  amp  amp  navigator userAgent indexOf  Win    gt  0     if navigator plugins  amp  amp   A navigator plugins  detect function p   return p name indexOf  QuickTime      -1         Sound template   new Template   lt object id  sound   track    id   width  0  height  0  type  audio mpeg  data    url    gt       else if navigator plugins  amp  amp   A navigator plugins  detect function p   return p name indexOf  Windows Media      -1         Sound template   new Template   lt object id  sound   track    id   type  application x-mplayer2  data    url   gt  lt  object gt       else if navigator plugins  amp  amp   A navigator plugins  detect function p   return p name indexOf  RealPlayer      -1         Sound template   new Template   lt embed type  audio x-pn-realaudio-plugin  style  height 0  id  sound   track    id   src    url   loop  false  autostart  true  hidden  true   gt       else     Sound play   function

User · Answer

There s no crossbrowser way to achieve this with pure javascript  Instead you could use a small  wav file that you play using embed or object tags

User · Answer

The top answer was correct at the time but is now wrong; you can do it in pure javascript. But the one answer using javascript doesn't work any more, and the other answers are pretty limited or don't use pure javascript.

I made my own solution that works well and lets you control the volume, frequency, and wavetype.

//if you have another AudioContext class use that one, as some browsers have a limit
var audioCtx = new (window.AudioContext || window.webkitAudioContext || window.audioContext);

//All arguments are optional:

//duration of the tone in milliseconds. Default is 500
//frequency of the tone in hertz. default is 440
//volume of the tone. Default is 1, off is 0.
//type of tone. Possible values are sine, square, sawtooth, triangle, and custom. Default is sine.
//callback to use on end of tone
function beep(duration, frequency, volume, type, callback) {
    var oscillator = audioCtx.createOscillator();
    var gainNode = audioCtx.createGain();

    oscillator.connect(gainNode);
    gainNode.connect(audioCtx.destination);

    if (volume){gainNode.gain.value = volume;}
    if (frequency){oscillator.frequency.value = frequency;}
    if (type){oscillator.type = type;}
    if (callback){oscillator.onended = callback;}

    oscillator.start(audioCtx.currentTime);
    oscillator.stop(audioCtx.currentTime + ((duration || 500) / 1000));
};

Someone suggested I edit this to note it only works on some browsers. However Audiocontext seems to be supported on all modern browsers, as far as I can tell. It isn't supported on IE, but that has been discontinued by Microsoft. If you have any issues with this on a specific browser please report it.

User · Answer

This will enable you to play the sound multiple times  in contrast to the top-voted answer   var playSound    function beep         var snd   new Audio  data audio wav base64   uQRAAAAWMSLwUIYAAsYkXgoQwAEaYLWfkWgAI0wWs ItAAAGDgYtAgAyN QWaAAihwMWm4G8QQRDiMcCBcH3Cc CDv 7xA4Tvh9Rz y8QADBwMWgQAZG ILNAARQ4GLTcDeIIIhxGOBAuD7hOfBB3 94gcJ3w o5 5eIAIAAAVwWgQAVQ2ORaIQwEMAJiDg95G4nQL7mQVWI6GwRcfsZAcsKkJvxgxEjzFUgfHoSQ9Qq7KNwqHwuB13MA4a1q DmBrHgPcmjiGoh  EwC5nGPEmS4RcfkVKOhJf WOgoxJclFz3kgn  dBA ya1GhurNn8zb  9NNutNuhz31f    9vt   z IdAEAAAK4LQIAKobHItEIYCGAExBwe8jcToF9zIKrEdDYIuP2MgOWFSE34wYiR5iqQPj0JIeoVdlG4VD4XA67mAcNa1fhzA1jwHuTRxDUQ  iYBczjHiTJcIuPyKlHQkv LHQUYkuSi57yQT  uggfZNajQ3Vmz Zt   mm3Wm3Q576v     32   5 EOgAAADVghQAAAAA  uQZAUAB1WI0PZugAAAAAoQwAAAEk3nRd2qAAAAACiDgAAAAAAABCqEEQRLCgwpBGMlJkIz8jKhGvj4k6jzRnqasNKIeoh5gI7BJaC1A1AoNBjJgbyApVS4IDlZgDU5WUAxEKDNmmALHzZp0Fkz1FMTmGFl1FMEyodIavcCAUHDWrKAIA4aa2oCgILEBupZgHvAhEBcZ6joQBxS76AgccrFlczBvKLC0QI2cBoCFvfTDAo7eoOQInqDPBtvrDEZBNYN5xwNwxQRfw8ZQ5wQVLvO8OYU mHvFLlDh05Mdg7BT6YrRPpCBznMB2r  xKJjyyOh cImr2 4doscwD6neZjuZR4AgAABYAAAABy1xcdQtxYBYYZdifkUDgzzXaXn98Z0oi9ILU5mBjFANmRwlVJ3 6jYDAmxaiDG3 6xjQQCCKkRb 6kg wW kSJ5  rLobkLSiKmqP 0ikJuDaSaSf 6JiLYLEYnW  kXg1WRVJL 9EmQ1YZIsv 6Qzwy5qk7  tEU0nkls3 zIUMPKNX 6yZLf kFgAfgGyLFAUwY  uQZAUABcd5UiNPVXAAAApAAAAAE0VZQKw9ISAAACgAAAAAVQIygIElVrFkBS Jhi EAuu lKAkYUEIsmEAEoMeDmCETMvfSHTGkF5RWH7kz ESHWPAq kcCRhqBtMdokPdM7vil7RG98A2sc7zO6ZvTdM7pmOUAZTnJW NXxqmd41dqJ6mLTXxrPpnV8avaIf5SvL7pndPvPpndJR9Kuu8fePvuiuhorgWjp7Mf PRjxcFCPDkW31srioCExivv9lcwKEaHsf 7ow2Fl1T 9RkXgEhYElAoCLFtMArxwivDJJ bR1HTKJdlEoTELCIqgEwVGSQ hIm0NbK8WXcTEI0UPoa2NbG4y2K00JEWbZavJXkYaqo9CRHS55FcZTjKEk3NKoCYUnSQ0rWxrZbFKbKIhOKPZe1cJKzZSaQrIyULHDZmV5K4xySsDRKWOruanGtjLJXFEmwaIbDLX0hIPBUQPVFVkQkDoUNfSoDgQGKPekoxeGzA4DUvnn4bxzcZrtJyipKfPNy5w 9lnXwgqsiyHNeSVpemw4bWb9psYeq  uQZBoABQt4yMVxYAIAAAkQoAAAHvYpL5m6AAgAACXDAAAAD59jblTirQe9upFsmZbpMudy7Lz1X1DYsxOOSWpfPqNX2WqktK0DMvuGwlbNj44TleLPQ Gsfb GOWOKJoIrWb3cIMeeON6lz2umTqMXV8Mj30yWPpjoSa9ujK8SyeJP5y5mOW1D6hvLepeveEAEDo0mgCRClOEgANv3B9a6fikgUSu DmAMATrGx7nng5p5iimPNZsfQLYB2sDLIkzRKZOHGAaUyDcpFBSLG9MCQALgAIgQs2YunOszLSAyQYPVC2YdGGeHD2dTdJk1pAHGAWDjnkcLKFymS3RQZTInzySoBwMG0QueC3gMsCEYxUqlrcxK6k1LQQcsmyYeQPdC2YfuGPASCBkcVMQQqpVJshui1tkXQJQV0OXGAZMXSOEEBRirXbVRQW7ugq7IM7rPWSZyDlM3IuNEkxzCOJ0ny2ThNkyRai1b6ev  3dzNGzNb  4uAvHT5sURcZCFcuKLhOFs8mLAAEAt4UWAAIABAAAAAB4qbHo0tIjVkUU  uQZAwABfSFz3ZqQAAAAAngwAAAE1HjMp2qAAAAACZDgAAAD5UkTE1UgZEUExqYynN1qZvqIOREEFmBcJQkwdxiFtw0qEOkGYfRDifBui9MQg4QAHAqWtAWHoCxu1Yf4VfWLPIM2mHDFsbQEVGwyqQoQcwnfHeIkNt9YnkiaS1oizycqJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l  8elePK Lf  IInrOF FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go 8xJ0UiCb8LHHdftWyLJE0QIAIsI UbXu67dZMjmgDGCGl1H vpF4NSDckSIkk7Vd sxEhBQMRU8j 12UIRhzSaUdQ rQU5kGeFxm hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf pD6ElLqSX rUmOQNpJFa r sa4e pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj NIEig0YfyWUho1VBBBA  uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y IDGid 9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN 9Robv Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV YcS XVLnSS WLDroqArFkMEsAS eWmrUzrO0oEmE40RlMZ5 ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI gviKL6qvvFs1 bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a EEBUdU1KrXLf40GoiiFXK   qpoiDXrOgqDR38JB0bw7SoL ZB9o1RCkQjQ2CBYZKd  VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt WKi2N4d  uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF Mg 0aohSIRobBAsMlO  Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR LsS4W rFRb                                                                                                                                                                                                                                                                                                                                                                                                                                 VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU           return function                  snd play                  playSound       Play first time playSound       Play second time

User · Answer

Note put this code in your javascript at the point you want the beep to occur  and remember to specify the directory or folder where the beep sound is stored source     lt script gt    Appending HTML5 Audio Tag in HTML Body     lt audio id  chatAudio  gt  lt source src  sound notify ogg  type  audio ogg  gt  lt source src  sound notify mp3  type  audio mpeg  gt  lt source src  sound notify wav  type  audio wav  gt  lt  audio gt    appendTo  body         chatAudio   0  play     lt  script gt    Reference http   www 9lessons info 2013 04 play-notification-sound-using-jquery html   I implemented this in a social media i am developing and it works find  a notification like that of facebook when chatting  notifying you that you have a new chat message

User · Answer

Using CSS you can do it if you add the following style to a tag  but you will need a wav file    lt style type  text css  gt           beep  cue  url  beep wav      lt  style gt   var body document getElementByTagName  body    body className body className          beep

User · Answer

Solution  You can now use base64 files to produce sounds when imported as data URI  The solution is almost the same as the previous ones  except you do not need to import an external audio file   function beep         var snd   new Audio  data audio wav base64   uQRAAAAWMSLwUIYAAsYkXgoQwAEaYLWfkWgAI0wWs ItAAAGDgYtAgAyN QWaAAihwMWm4G8QQRDiMcCBcH3Cc CDv 7xA4Tvh9Rz y8QADBwMWgQAZG ILNAARQ4GLTcDeIIIhxGOBAuD7hOfBB3 94gcJ3w o5 5eIAIAAAVwWgQAVQ2ORaIQwEMAJiDg95G4nQL7mQVWI6GwRcfsZAcsKkJvxgxEjzFUgfHoSQ9Qq7KNwqHwuB13MA4a1q DmBrHgPcmjiGoh  EwC5nGPEmS4RcfkVKOhJf WOgoxJclFz3kgn  dBA ya1GhurNn8zb  9NNutNuhz31f    9vt   z IdAEAAAK4LQIAKobHItEIYCGAExBwe8jcToF9zIKrEdDYIuP2MgOWFSE34wYiR5iqQPj0JIeoVdlG4VD4XA67mAcNa1fhzA1jwHuTRxDUQ  iYBczjHiTJcIuPyKlHQkv LHQUYkuSi57yQT  uggfZNajQ3Vmz Zt   mm3Wm3Q576v     32   5 EOgAAADVghQAAAAA  uQZAUAB1WI0PZugAAAAAoQwAAAEk3nRd2qAAAAACiDgAAAAAAABCqEEQRLCgwpBGMlJkIz8jKhGvj4k6jzRnqasNKIeoh5gI7BJaC1A1AoNBjJgbyApVS4IDlZgDU5WUAxEKDNmmALHzZp0Fkz1FMTmGFl1FMEyodIavcCAUHDWrKAIA4aa2oCgILEBupZgHvAhEBcZ6joQBxS76AgccrFlczBvKLC0QI2cBoCFvfTDAo7eoOQInqDPBtvrDEZBNYN5xwNwxQRfw8ZQ5wQVLvO8OYU mHvFLlDh05Mdg7BT6YrRPpCBznMB2r  xKJjyyOh cImr2 4doscwD6neZjuZR4AgAABYAAAABy1xcdQtxYBYYZdifkUDgzzXaXn98Z0oi9ILU5mBjFANmRwlVJ3 6jYDAmxaiDG3 6xjQQCCKkRb 6kg wW kSJ5  rLobkLSiKmqP 0ikJuDaSaSf 6JiLYLEYnW  kXg1WRVJL 9EmQ1YZIsv 6Qzwy5qk7  tEU0nkls3 zIUMPKNX 6yZLf kFgAfgGyLFAUwY  uQZAUABcd5UiNPVXAAAApAAAAAE0VZQKw9ISAAACgAAAAAVQIygIElVrFkBS Jhi EAuu lKAkYUEIsmEAEoMeDmCETMvfSHTGkF5RWH7kz ESHWPAq kcCRhqBtMdokPdM7vil7RG98A2sc7zO6ZvTdM7pmOUAZTnJW NXxqmd41dqJ6mLTXxrPpnV8avaIf5SvL7pndPvPpndJR9Kuu8fePvuiuhorgWjp7Mf PRjxcFCPDkW31srioCExivv9lcwKEaHsf 7ow2Fl1T 9RkXgEhYElAoCLFtMArxwivDJJ bR1HTKJdlEoTELCIqgEwVGSQ hIm0NbK8WXcTEI0UPoa2NbG4y2K00JEWbZavJXkYaqo9CRHS55FcZTjKEk3NKoCYUnSQ0rWxrZbFKbKIhOKPZe1cJKzZSaQrIyULHDZmV5K4xySsDRKWOruanGtjLJXFEmwaIbDLX0hIPBUQPVFVkQkDoUNfSoDgQGKPekoxeGzA4DUvnn4bxzcZrtJyipKfPNy5w 9lnXwgqsiyHNeSVpemw4bWb9psYeq  uQZBoABQt4yMVxYAIAAAkQoAAAHvYpL5m6AAgAACXDAAAAD59jblTirQe9upFsmZbpMudy7Lz1X1DYsxOOSWpfPqNX2WqktK0DMvuGwlbNj44TleLPQ Gsfb GOWOKJoIrWb3cIMeeON6lz2umTqMXV8Mj30yWPpjoSa9ujK8SyeJP5y5mOW1D6hvLepeveEAEDo0mgCRClOEgANv3B9a6fikgUSu DmAMATrGx7nng5p5iimPNZsfQLYB2sDLIkzRKZOHGAaUyDcpFBSLG9MCQALgAIgQs2YunOszLSAyQYPVC2YdGGeHD2dTdJk1pAHGAWDjnkcLKFymS3RQZTInzySoBwMG0QueC3gMsCEYxUqlrcxK6k1LQQcsmyYeQPdC2YfuGPASCBkcVMQQqpVJshui1tkXQJQV0OXGAZMXSOEEBRirXbVRQW7ugq7IM7rPWSZyDlM3IuNEkxzCOJ0ny2ThNkyRai1b6ev  3dzNGzNb  4uAvHT5sURcZCFcuKLhOFs8mLAAEAt4UWAAIABAAAAAB4qbHo0tIjVkUU  uQZAwABfSFz3ZqQAAAAAngwAAAE1HjMp2qAAAAACZDgAAAD5UkTE1UgZEUExqYynN1qZvqIOREEFmBcJQkwdxiFtw0qEOkGYfRDifBui9MQg4QAHAqWtAWHoCxu1Yf4VfWLPIM2mHDFsbQEVGwyqQoQcwnfHeIkNt9YnkiaS1oizycqJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l  8elePK Lf  IInrOF FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go 8xJ0UiCb8LHHdftWyLJE0QIAIsI UbXu67dZMjmgDGCGl1H vpF4NSDckSIkk7Vd sxEhBQMRU8j 12UIRhzSaUdQ rQU5kGeFxm hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf pD6ElLqSX rUmOQNpJFa r sa4e pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj NIEig0YfyWUho1VBBBA  uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y IDGid 9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN 9Robv Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV YcS XVLnSS WLDroqArFkMEsAS eWmrUzrO0oEmE40RlMZ5 ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI gviKL6qvvFs1 bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a EEBUdU1KrXLf40GoiiFXK   qpoiDXrOgqDR38JB0bw7SoL ZB9o1RCkQjQ2CBYZKd  VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt WKi2N4d  uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF Mg 0aohSIRobBAsMlO  Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR LsS4W rFRb                                                                                                                                                                                                                                                                                                                                                                                                                                 VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU           snd play      beep      Compatibility  Data URI is supported on almost every browser now  More information on http   caniuse com datauri  Demo  http   jsfiddle net 7EAgz   Conversion Tool  And here is where you can convert mp3 or wav files into Data URI format   https   dopiaza org tools datauri index php

User · Answer

Here s how I get it to beep using HTML5  First I copy and convert the windows wav file to mp3  then I use this code   var  beep   window Audio  Content Custom Beep mp3    function playBeep      beep play       It s faster to declare the sound file globally and refer to it as needed

User · Answer

function Sound url  vol  autoplay  loop        var that   this       that url    url     undefined         url      that vol    vol     undefined    1 0   vol      that autoplay    autoplay     undefined    true   autoplay      that loop    loop     undefined    false   loop      that sample   null       if that url                       that sync   function                that sample volume   that vol              that sample loop   that loop              that sample autoplay   that autoplay              setTimeout function    that sync       60                       that sample   document createElement  audio            that sample src   that url          that sync             that play   function                if that sample                                that sample play                                      that pause   function                if that sample                                that sample pause                                      var test   new Sound  http   mad-hatter fr Assets projects FreedomWings Assets musiques freedomwings mp3    test play      http   jsfiddle net sv9j638j

User · Answer

function beep wavFile       wavFile   wavFile     beep wav      if  navigator appName     Microsoft Internet Explorer            var e   document createElement  BGSOUND            e src   wavFile          e loop  1          document body appendChild e           document body removeChild e        else          var e   document createElement  AUDIO            var src1   document createElement  SOURCE            src1 type   audio wav           src1 src  wavFile          e appendChild src1           e play              Works on Chrome IE Mozilla using Win7 OS  Requires a beep wav file on the server

User · Answer

Now it easy enough with JavaScript AudioContext API. It fully supported by major desktop and mobile web browsers...

let context = null;

const beep = (freq = 520, duration = 200, vol = 100) => {
    const oscillator = context.createOscillator();
    const gain = context.createGain();
    oscillator.connect(gain);
    oscillator.frequency.value = freq;
    oscillator.type = "square";
    gain.connect(context.destination);
    gain.gain.value = vol * 0.01;
    oscillator.start(context.currentTime);
    oscillator.stop(context.currentTime + duration * 0.001);
}

document.querySelector('button').addEventListener('click', function () {
    context = new AudioContext();
    beep();
});

I wrote a small application that plays music from the Mario game without any audio file, just runtime. In my opinion it’s interesting, you can see the source code and listen it.

User · Answer

lt html gt   lt head gt       lt script src  https   surikov github io webaudiofont npm dist WebAudioFontPlayer js  gt  lt  script gt       lt script src  https   surikov github io webaudiofontdata sound 0000 JCLive sf2 file js  gt  lt  script gt       lt script gt          var selectedPreset  tone 0000 JCLive sf2 file          var AudioContextFunc   window AudioContext    window webkitAudioContext          var audioContext   new AudioContextFunc            var player new WebAudioFontPlayer            player loader decodeAfterLoading audioContext    tone 0000 JCLive sf2 file         lt  script gt   lt  head gt   lt body gt       lt p gt  lt a href     onmousedown  player queueWaveTable audioContext  audioContext destination  selectedPreset  0  55  3 5    gt Play a note lt  a gt  lt  p gt       lt hr  gt       lt p gt  lt a href  https   github com surikov webaudiofont  gt source lt  a gt  lt  p gt   lt  body gt      listen here https   jsbin com lamidog 1 edit html output

User · Answer

It s not possible to do directly in JavaScript  You ll need to embed a short WAV file in the HTML  and then play that via code   An Example    lt script gt  function PlaySound soundObj      var sound   document getElementById soundObj     sound Play       lt  script gt    lt embed src  success wav  autostart  false  width  0  height  0  id  sound1  enablejavascript  true  gt    You would then call it from JavaScript code as such   PlaySound  sound1      This should do exactly what you want - you ll just need to find create the beep sound yourself  which should be trivial

User · Answer

Using Houshalter s suggestion  I made this simple tone synthesizer demo   Screenshot  Here is a screenshot  Try the live demo further down in this Answer  click Run code snippet      Demo code   x000D   x000D  audioCtx   new window AudioContext    window webkitAudioContext     x000D   x000D  show    x000D   x000D  function show     x000D    frequency   document getElementById  fIn   value  x000D    document getElementById  fOut   innerHTML   frequency     Hz   x000D   x000D    switch  document getElementById  tIn   value   1    x000D      case 0  type    sine   break  x000D      case 1  type    square   break  x000D      case 2  type    sawtooth   break  x000D      case 3  type    triangle   break  x000D      x000D    document getElementById  tOut   innerHTML   type  x000D   x000D    volume   document getElementById  vIn   value   100  x000D    document getElementById  vOut   innerHTML   volume  x000D   x000D    duration   document getElementById  dIn   value  x000D    document getElementById  dOut   innerHTML   duration     ms   x000D    x000D   x000D  function beep     x000D    var oscillator   audioCtx createOscillator    x000D    var gainNode   audioCtx createGain    x000D   x000D    oscillator connect gainNode   x000D    gainNode connect audioCtx destination   x000D   x000D    gainNode gain value   volume  x000D    oscillator frequency value   frequency  x000D    oscillator type   type  x000D   x000D    oscillator start    x000D   x000D    setTimeout  x000D      function     x000D        oscillator stop    x000D         x000D      duration x000D       x000D     x000D  frequency x000D   lt input type  range  id  fIn  min  40  max  6000  oninput  show      gt  x000D   lt span id  fOut  gt  lt  span gt  lt br gt  x000D  type x000D   lt input type  range  id  tIn  min  0  max  3  oninput  show      gt  x000D   lt span id  tOut  gt  lt  span gt  lt br gt  x000D  volume x000D   lt input type  range  id  vIn  min  0  max  100  oninput  show      gt  x000D   lt span id  vOut  gt  lt  span gt  lt br gt  x000D  duration x000D   lt input type  range  id  dIn  min  1  max  5000  oninput  show      gt  x000D   lt span id  dOut  gt  lt  span gt  x000D   lt br gt  x000D   lt button onclick  beep     gt Play lt  button gt  x000D   x000D   x000D    You can clone and tweak the code here  Tone synthesizer demo on JS Bin  Have fun   Compatible browsers    Chrome mobile  amp  desktop  Firefox mobile  amp  desktop Opera mobile  mini  amp  desktop Android browser Microsoft Edge browser Safari on iPhone or iPad   Not Compatible   Internet Explorer version 11  but does work on the Edge browser

User · Answer

I wrote a function to beep with the new Audio API.

var beep = (function () {
    var ctxClass = window.audioContext ||window.AudioContext || window.AudioContext || window.webkitAudioContext
    var ctx = new ctxClass();
    return function (duration, type, finishedCallback) {

        duration = +duration;

        // Only 0-4 are valid types.
        type = (type % 5) || 0;

        if (typeof finishedCallback != "function") {
            finishedCallback = function () {};
        }

        var osc = ctx.createOscillator();

        osc.type = type;
        //osc.type = "sine";

        osc.connect(ctx.destination);
        if (osc.noteOn) osc.noteOn(0); // old browsers
        if (osc.start) osc.start(); // new browsers

        setTimeout(function () {
            if (osc.noteOff) osc.noteOff(0); // old browsers
            if (osc.stop) osc.stop(); // new browsers
            finishedCallback();
        }, duration);

    };
})();

jsFiddle.

User · Answer

As we read in this answer  HTML5 will solve this for you if you re open to that route  HTML5 audio is supported in all modern browsers   Here s a copy of the example   var snd   new Audio  file wav       buffers automatically when created snd play

[javascript] How do I make JavaScript beep?

The answer is

Screenshot

Demo code

Compatible browsers:

Not Compatible

Examples related to javascript

Examples related to audio

Examples related to browser

Examples related to beep

Tags