Click here to Skip to main content
15,867,765 members
Articles / Programming Languages / Javascript
Tip/Trick

Continuous Beep on Webpage with SoundManager 2

Rate me:
Please Sign up or sign in to vote.
4.00/5 (2 votes)
27 Jun 2022CPOL1 min read 7.1K   66   6   3
Continuous beep on webpage with SoundManager 2

This tip is for those developers who want to play continuous beep sound as alarm on IE which, unfortunately, does not support WebAudio. SoundManager 2 is the solution to play sounds on web browser. For web browsers that support web audio, it utilizes that just fine. For IE and those not, its falls back on Flash. IE comes installed with a default Flash plugin. To use SoundManager 2, you can download from its official website and put it in web application and included its JavaScript file in the HTML. soundManager is initialized by calling setup(). url is the folder for the SWF Flash programs which are also downloaded from SoundManager 2. Then we set our preferred flashVersion and whether preferFlash is the default. onready callback is set to an anonymous function which is createSound() with a unique id, a url to the Beep.mp3 and whether autoLoad or autoPlay should be on by default. We do nothing in onload function. And volume is set to 50. Accepted volume values are 0-100.

JavaScript
<script type="text/javascript" src="script/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript">
    var alarm = null;
    var stop = false;
    soundManager.setup({
        url: '/swf/',
        flashVersion: 9, // optional: shiny features (default = 8)
        // optional: ignore Flash where possible, use 100% HTML5 mode
        preferFlash: false,
        onready: function () {
            // Ready to use; soundManager.createSound() etc. can now be called.
            alarm = soundManager.createSound(
                {
                    id: 'mySound',
                    url: '/Beep.mp3',
                    autoLoad: true,
                    autoPlay: false,
                    onload: function () {
						// to check whether sound is loaded
                        //alert('The sound ' + this.id + ' loaded!');
                    },
                    volume: 50
                });
        }
    });

Next we put 2 buttons on HTML to playSound() and stopSound(). For our example, I put them in Default.aspx.

HTML
<button id="btnPlay" onclick="playSound(); return false;">Play Sound</button>
<button id="btnStop" onclick="stopSound(); return false;">Stop Sound</button>

This is how playSound() and stopSound() implements continuous beep. loopSound() will start playing the beep and in onfinish callback, loopSound() is called again unless stop is true. In playSound(), stop is set to false and loopSound() is called. In stopSound(), stop is set to true to break the continuous beep in onfinish callback and alarm is stop().

JavaScript
var alarm = null;
var stop = false;

function loopSound(sound) {
    if (sound === null)
        return;
    sound.play({
        onfinish: function () {
        if(stop==false)
            loopSound(sound);
        }
    });
}

function playSound() {
    stop = false;
    loopSound(alarm);
}

function stopSound() {
    stop = true; // stop looping
    if(alarm!==null)
        alarm.stop();
}

That's all, folks, for this tip! The code is hosted at GitHub.

History

  • 28th June, 2022: Fixed the Newtonsoft.Json vulnerability reported by Github.
  • 2nd July, 2019: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Singapore Singapore
Shao Voon is from Singapore. His interest lies primarily in computer graphics, software optimization, concurrency, security, and Agile methodologies.

In recent years, he shifted focus to software safety research. His hobby is writing a free C++ DirectX photo slideshow application which can be viewed here.

Comments and Discussions

 
Questionwhy not HTML5 audio? Pin
raddevus3-Jul-19 8:11
mvaraddevus3-Jul-19 8:11 
AnswerRe: why not HTML5 audio? Pin
Shao Voon Wong6-Jul-19 15:35
mvaShao Voon Wong6-Jul-19 15:35 
GeneralRe: why not HTML5 audio? Pin
raddevus8-Jul-19 7:22
mvaraddevus8-Jul-19 7:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.