跨浏览器HTML5 javascript生成单个滴答声 [英] cross browser HTML5 javascript generate single tick sound

问题描述

我需要大约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和其他几个浏览器.

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

解决方案

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

and then running:

playSound ();

But these examples didn't work. I have chrome, firefox, opera, and a couple of other browsers.

Does anyone know how to do this without much code?

解决方案

The Web Audio API provides a set of interesting tools for audio processing which I've used to produce a 226.6hz 20ms square wave below.

Update Web Audio oscillator notes can only be started and stopped once. This is a design flaw feature that requires creating a new ocillator node each time one is played.

I've also included master and oscillator gain controls so show interconnection of audio nodes.

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

The above code works in Firefox and Chrome, and MDN provides more information on browser compatability.

The timing accuracy of starting and stopping oscillators with the code as written is of concern: it sometimes abbreviates or drops click sounds. Possibly start starts playing sound asynchronously and any accumulated delays in starting to play are coming out of total play length, but I have not fully investigated the issue (setTimeout was less prone to the problem than stop).

这篇关于跨浏览器HTML5 javascript生成单个滴答声的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！