跨浏览器HTML5 javascript生成单个滴答声

时间:2018-02-22 22:18:05

标签: javascript html5 audio

我需要一个大约20 ms宽的单次方波。 我没有找到一个简单的自治代码示例来执行此操作。

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

我看到一个人可以在本地构建声音的暗示 (用实际数据替换......数据):

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

然后运行:

playSound ();

但这些例子不起作用。 我有chrome,firefox,opera和其他一些浏览器。

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

1 个答案:

答案 0 :(得分:1)

Web Audio API为音频处理提供了一套有趣的工具,我曾用这些工具在下面产生226.6hz的20ms方波。

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

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



// 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>
&#13;
&#13;
&#13;

上述代码适用于Firefox和Chrome,MDN提供了有关browser compatability的更多信息。

使用所写代码启动和停止振荡器的定时精度值得关注:它有时会缩短或降低咔嗒声。可能start开始异步播放声音,并且开始播放的任何累积延迟都来自总播放时间,但我还没有完全调查该问题(setTimeout比{{1}更不容易出现问题}})。