倒计时到0时发出哔哔声

时间：2015-03-20 02:09:41

标签： javascript audio timer countdown beep

我正在尝试创建一个简单的倒数计时器，在完成后会发出哔哔声。我的倒计时器正在运行。我的声音文件已经创建并且已经存在。播放声音文件的脚本不起作用，这就是我要求帮助的内容。

我四处寻找答案，大多数人都建议连接到外部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>

4 个答案:

答案 0 :(得分：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/

答案 1 :(得分：0)

我认为你应该使用

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

答案 2 :(得分：0)

这是一个使用纯JavaScript与HTML5音频元素的清洁解决方案。

/*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>

答案 3 :(得分：0)

您可以在此演示中使用音调合成器：

enter image description here 

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>

玩得开心！

我从Houshalter那里得到了解决方案： How do I make Javascript beep?

您可以在此处克隆和调整代码： Tone synthesizer demo on JS Bin

兼容的浏览器：

  • Chrome mobile＆amp;桌面
  • Firefox mobile＆amp;桌面Opera移动，迷你＆amp;桌面
  • Android浏览器
  • Microsoft Edge浏览器
  • iPhone或iPad上的Safari

不兼容

  • Internet Explorer版本11（但可以在Edge浏览器上运行）
相关问题
最新问题