倒计时到 0 时发出哔声

Posted 2023-02-25

【中文标题】倒计时到 0 时发出哔声

【英文标题】：Play a beep when a countdown reaches 0

【发布时间】：2015-03-20 02:09:41

【问题描述】：

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

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

【问题讨论】：

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

我比我更喜欢你的，它更简单。但是，这会在页面加载后立即播放。我尝试将“audio.play()”放入倒计时 === 0 部分，但没有奏效。

@adeneo：如果曲目需要一段时间才能加载，这会起作用吗？

谢谢！再加上我在下面得到的额外帮助，效果很好！

你应该谨慎使用字符串作为 setTimeout() 的第一个参数，因为这实际上变成了一个 eval() 语句——这是邪恶的。此外，您所有的函数和变量都在全局范围内 - 这也是邪恶的。最后，应尽可能避免使用 -- 运算符。我建议使用 linter，例如 JSHint

【参考方案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/

【讨论】：

我之前更改了小提琴网址，确保它是jsfiddle.net/moogs/TBS8C/16

嗯，这很奇怪。我将您的代码复制并粘贴到我的代码中，没有更改任何内容，但它没有用。但它在演示中有效

是的！最后一个成功了！我的问题总是倾向于语法。谢谢！

【参考方案2】：

我认为你应该使用

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

【参考方案3】：

这是一个使用纯 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>

【参考方案4】：

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

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 移动版和桌面版 Firefox 移动和桌面 Opera 移动、迷你和桌面 安卓浏览器 Microsoft Edge 浏览器 iPhone 或 iPad 上的 Safari

不兼容

Internet Explorer 版本 11（但可以在 Edge 浏览器上运行）