javascript - 倒计时达到 0 时发出蜂鸣声

Question

我正在尝试创建一个简单的倒数计时器，完成后会发出蜂鸣声。我的倒计时器正在工作。我的声音文件已创建并就位。播放声音文件的脚本不起作用，这就是我寻求帮助的原因。

我四处寻找答案，大多数人建议连接到外部 JS 库，但我不想这样做。话虽这么说，这是我的代码:

<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

声音管理器的问题是您需要在 onready 事件之后调用 createSound:

 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 演示 http://jsfiddle.net/TBS8C/16/

编辑

看来您将问题更改为不再使用 soundManager。这是仅包含 HTML5 音频的演示。

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 演示 http://jsfiddle.net/nsmp8mfv/1/