跨浏览器HTML5 javascript生成单个滴答声[重复]答案

【问题标题】：cross browser HTML5 javascript generate single tick sound [duplicate]跨浏览器HTML5 javascript生成单个滴答声[重复]
【发布时间】：2018-08-02 22:28:42
【问题描述】：

我需要一个宽度约为 20 毫秒的单次方波。我还没有找到一个简单的自主代码示例来执行此操作。

没有外部库，只有几行代码可以这样做吗？在运行 DOS 的 IBM XT 上很容易做到。我使用创意关键字进行了扩展搜索，但一无所获。

我看到一个提示，可以在本地构建声音（用实际数据替换 ...data...）：

var playSound = (function beep () {
    var snd = new Audio ("data:audio/wav;base64,//...data...");
    return function () {     
        snd.play(); 
    }
}) ();

然后运行：

playSound ();

但这些示例不起作用。我有 chrome、firefox、opera 和其他几个浏览器。

有没有人知道如何在没有太多代码的情况下做到这一点？

【问题讨论】：

标签： javascript html audio

【解决方案1】：

Web Audio API 提供了一组有趣的音频处理工具，我用它来产生下面的 226.6hz 20ms 方波。

更新网络音频振荡器音符只能启动和停止一次。这是一个设计缺陷功能，每次播放时都需要创建一个新的振荡器节点。

我还包括主控和振荡器增益控制，以显示音频节点的互连。

// create audio context, masterGain and nodeGain1 nodes

var audioContext = new (window.AudioContext || window.webkitAudioContext)();
//  ( "Webkit/blink browsers need prefix, Safari won't work without window.")

var masterGain = audioContext.createGain();
    masterGain.gain.value = 0.5;
masterGain.connect(audioContext.destination);

var nodeGain1 = audioContext.createGain();
    nodeGain1.gain.value = 0.5;
nodeGain1.connect(masterGain);

function clickBuzz( frequency, length) {
    var oscillatorNode = new OscillatorNode(audioContext, {type: 'square'});
    oscillatorNode.frequency.value = frequency;
    oscillatorNode.connect( nodeGain1);
    oscillatorNode.start(audioContext.currentTime);
    //setTimeout( function(){oscillatorNode.stop();}, length*1000);
    oscillatorNode.stop( audioContext.currentTime + length);
}

function volume1( rangeInput) {
    masterGain.gain.value = +rangeInput.value;
}

function volume2( rangeInput) {
    nodeGain1.gain.value= +rangeInput.value;
}

<p>Type in the textarea for keypress sounds:</p>
<textarea onkeydown="clickBuzz( 261.6, 0.020)"></textarea>
<p>
<input type="range" min="0" max="1" step="0.01" value="0.5" style="width: 200px" onchange="volume1(this)" onkeypress="volume1(this)"> master volume
</p><p>
<input type="range" min="0" max="1" step="0.01" value="0.5" style="width: 200px" onchange="volume2(this)" onkeyup="volume2(this)"> oscillator volume
</p>

以上代码可在 Firefox 和 Chrome 中运行，MDN 提供了更多关于 browser compatability 的信息。

使用编写的代码启动和停止振荡器的计时精度值得关注：它有时会缩短或降低咔嗒声。可能start 开始异步播放声音并且开始播放的任何累积延迟都超出了总播放长度，但我还没有完全调查这个问题（setTimeout 比stop 更不容易出现这个问题）。

【讨论】：

如果你关心浏览器的支持，为什么要使用 OscillatorNode 构造函数，只有最新的 chrome 和 FF 支持，而不是旧的 AudioContext.createOscillator 方法，所有主流浏览器都支持？
这么简单的事情要写很多代码。但它奏效了。谢谢。