Play a beep when a countdown reaches 0

Question

Im trying to create a simple countdown timer that plays a beep when it's done. My countdown timer is working. My sound file has been created and is in place. The script to play the sound file is not working, and thats what Im asking for help with.

Ive looked around for answers, and most recommend hooking up to an external JS library, which I do not want to do. That being said, here is my code:

<script language="Javascript">

var countdown;
var countdown_number;

var audio = new Audio('audio/beep.mp3'); 


function countdown_init() {
    countdown_number = 11;
    countdown_trigger();
}

function countdown_trigger() {
    if(countdown_number > 0) {
        countdown_number--;
        document.getElementById('countdown_text').innerHTML = countdown_number;
        if(countdown_number > 0) {
            countdown = setTimeout('countdown_trigger()', 1000);

if(countdown_number === 0) { audio.play(); }

        }

    }
}

function countdown_clear() {
    clearTimeout(countdown);
}





</script>





<div>
    <input type="button" value="start countdown" onClick="countdown_init()" />
    <input type="button" value="stop countdown" onClick="countdown_clear()" /> <br /><br />
</div>
<div id="countdown_text">Placeholding text</div>

Answer 1

The issue with your sound manager was that you needed to call createSound after the onready event:

 var countdown;
var countdown_number;
var mySoundObject;

function countdown_trigger() {
    if (countdown_number > 0) {
        countdown_number--;
        document.getElementById('countdown_text').innerHTML = countdown_number;
        if (countdown_number > 0) {
            countdown = setTimeout(countdown_trigger, 1000);
        }

        if (countdown_number === 0) {
            mySoundObject.play();
        }
    }
}

function countdown_clear() {
    clearTimeout(countdown);
}

function countdown_init() {
    countdown_number = 11;
    countdown_trigger();
}

document.getElementById('start').onclick = countdown_init;
document.getElementById('stop').onclick = countdown_clear;

soundManager.setup({
    url: 'http://ivdemo.chaseits.co.uk/SoundManager2-2.97a.20131201/swf/soundmanager2_flash_xdomain/soundmanager2_flash9_debug.swf',
    flashVersion: 9,
    useHTML5Audio: true,
    html5Test: 'maybe',
    preferFlash: false,
    onready: function () {
        mySoundObject = soundManager.createSound({
            id: 'mySound',
            url: 'http://www.freshly-ground.com/misc/music/20060826%20-%20Armstrong.mp3'
        });
    }
});

JSFiddle Demo http://jsfiddle.net/TBS8C/16/

EDIT

It looks like you changed your question to not using soundManager anymore. Here's a demo with HTML5 audio only.

var countdown;
var countdown_number;
var audio = new Audio('http://www.freshly-ground.com/misc/music/20060826%20-%20Armstrong.mp3');

function countdown_trigger() {
    if (countdown_number > 0) {
        countdown_number--;
        document.getElementById('countdown_text').innerHTML = countdown_number;
        if (countdown_number > 0) {
            countdown = setTimeout(countdown_trigger, 1000);
        }

        if (countdown_number === 0) {
            audio.play()
        }
    }
}

function countdown_clear() {
    clearTimeout(countdown);
}

function countdown_init() {
    countdown_number = 11;
    countdown_trigger();
}

document.getElementById('start').onclick = countdown_init;
document.getElementById('stop').onclick = countdown_clear;

<input type="button" value="start countdown" id="start" />
<input type="button" value="stop countdown" id="stop" />
<div id="countdown_text"></div>

JSFiddle Demo http://jsfiddle.net/nsmp8mfv/1/

Answer 2

You could use the tone synthesizer in this demo:

audioCtx = new(window.AudioContext || window.webkitAudioContext)();

show();

function show() {
  frequency = document.getElementById("fIn").value;
  document.getElementById("fOut").innerHTML = frequency + ' Hz';

  switch (document.getElementById("tIn").value * 1) {
    case 0: type = 'sine'; break;
    case 1: type = 'square'; break;
    case 2: type = 'sawtooth'; break;
    case 3: type = 'triangle'; break;
  }
  document.getElementById("tOut").innerHTML = type;

  volume = document.getElementById("vIn").value / 100;
  document.getElementById("vOut").innerHTML = volume;

  duration = document.getElementById("dIn").value;
  document.getElementById("dOut").innerHTML = duration + ' ms';
}

function beep() {
  var oscillator = audioCtx.createOscillator();
  var gainNode = audioCtx.createGain();

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

  gainNode.gain.value = volume;
  oscillator.frequency.value = frequency;
  oscillator.type = type;

  oscillator.start();

  setTimeout(
    function() {
      oscillator.stop();
    },
    duration
  );
};

frequency
<input type="range" id="fIn" min="40" max="6000" oninput="show()" />
<span id="fOut"></span><br>
type
<input type="range" id="tIn" min="0" max="3" oninput="show()" />
<span id="tOut"></span><br>
volume
<input type="range" id="vIn" min="0" max="100" oninput="show()" />
<span id="vOut"></span><br>
duration
<input type="range" id="dIn" min="1" max="5000" oninput="show()" />
<span id="dOut"></span>
<br>
<button onclick='beep();'>Play</button>

Have fun!

I got the solution from Houshalter here: How do I make Javascript beep?

You can clone and tweak the code here: Tone synthesizer demo on JS Bin

Compatible browsers:

• Chrome mobile & desktop
• Firefox mobile & desktop Opera mobile, mini & desktop
• Android browser
• Microsoft Edge browser
• Safari on iPhone or iPad

Not Compatible

• Internet Explorer version 11 (but does work on the Edge browser)

Answer 3

Here's a cleaner solution using pure javascript with the HTML5 Audio element.

/*jslint browser: true*/
/*global window */

(function () {

    'use strict';

    var _count = 10,
        _countdownTimer;
    
    function resetCounter() {
        if (_countdownTimer) {
            window.clearInterval(_countdownTimer);
        }
        _countdownTimer = null;
        _count = 10;
        document.getElementById("countdownDiv").innerText = "";
    }
  
    function startCountdown() {
              
        if (!_countdownTimer) {
          
            _countdownTimer = window.setInterval(function () {
              
                document.getElementById("countdownDiv").innerText = _count;
                _count = _count - 1;
                
                if (_count < 0) {
                    resetCounter();                  
                    document.getElementById("countdownDiv").innerText = "Beep";
                    document.getElementById("beepAudio").play();
                }
                
            }, 1000); 
          
        }
    }

    function stopCountdown() {
        resetCounter();
    }
  
    
    // Init
    document.getElementById("beepAudio").src = "http://soundbible.com/grab.php?id=1252&type=mp3";
    document.getElementById("beepAudio").load();
    
    document.getElementById("startButton").onclick = startCountdown;
    document.getElementById("stopButton").onclick = stopCountdown;
    
}());

<audio id="beepAudio"></audio>
<div>
    <input id="startButton" type="button" value="Start" />
    <input id="stopButton" type="button" value="Stop" />
    <br />
    <br />
</div>
<div id="countdownDiv"></div>

Answer 4

I think you should use

soundManager.getSoundById("mySound").play()