js webaudio音量_WebAudio：JS中的振荡器

js webaudio音量" width="403px" height="256px" style="outline: none;" />

js webaudio音量

How about generating some noise in JavaScript?

如何在JavaScript中产生一些噪音？

Demo is here: oscillator.

演示在这里：振荡器。

这是如何运作的？ (How does this work?)

Using HTML Web Audio you can synthesize audio with a given frequency. E.g. 440Hz is A ("la" in solfège)

使用HTML Web Audio，您可以合成给定频率的音频。例如440Hz为A(在solfège中为“ la”)

This means you don't need an <audio> element or any mp3, ogg, wav, etc, no external files.

这意味着您不需要<audio>元素或任何mp3，ogg，wav等文件，也不需要外部文件。

Let's see how.

让我们看看如何。

能够使用浏览器？ (Capable browser?)

You need a browser that supports AudioContext. No such (major) browser at the time of writing, afaik. But there's webkitAudioContext supported in stable iOS Safari, Safari, Chrome. Also there could be browsers that support AudioContext but not the oscillator part. So starting off:

您需要支持AudioContext的浏览器。在撰写本文时，afaik没有此类(主要)浏览器。但是稳定的iOS Safari，Safari，Chrome中支持webkitAudioContext 。也可能有一些浏览器支持AudioContext但不支持振荡器部分。所以开始：

  // globals
  var audio_context, oscillator;
 
  // hello audio world
  (function init(g){
    try {
      audio_context = new (g.AudioContext || g.webkitAudioContext);
      oscillator = audio_context.createOscillator();
    } catch (e) {
      alert('No web audio oscillator support in this browser');
    }
  }(window));

开始/停止播放 (Start/stop playing)

Alright, next is a play(frequency /*number*/) function which makes noise with a given frequency.

好吧，接下来是一个play(frequency /*number*/)函数，它以给定的频率发出噪声。

  function play(freq) {
    oscillator = audio_context.createOscillator();
    oscillator.frequency.value = freq;
    oscillator.connect(audio_context.destination);
    oscillator.noteOn(0);
    fire('play', oscillator.frequency.value);
  }

(Don't mind fire(), it's just a poor man's event utility for logging what's going on)

(不要介意fire() ，它只是一个可怜的事件实用程序，用于记录正在发生的事情)

The audio context provides a createOscillator(). You assign the frequency you need and connect this oscillator node to the audio destination (speaker).

音频上下文提供了createOscillator() 。您分配所需的频率，然后将此振荡器节点连接到音频目的地(扬声器)。

There is a nice analogy going on in the Web Audio: you start with some input noise, say coming from microphone or an audio file, or, in this case, you generate the noise yourself. Then you connect that initial input to the output (destination) which is the system speaker/phones. In between though you can pass the noise through a bunch of nodes that can modify the noise.

Web音频中有一个很好的类比：您从输入噪声开始，例如来自麦克风或音频文件，或者在这种情况下，您自己产生了噪声。然后，将该初始输入连接到系统扬声器/电话的输出(目的地)。在这两者之间，您可以通过一系列可以修改噪声的节点传递噪声。

In this simple example I only have an oscillator node which is connected directly to the audio destination.

在这个简单的示例中，我只有一个振荡器节点，该节点直接连接到音频目标。

noteOn(0) starts playing the noise we just generated.

noteOn(0)开始播放刚刚生成的噪音。

Implementing stop() to silence the noise is just a question of calling noteOff(0) on the same oscillator node.

实现stop()使噪声静音只是在同一振荡器节点上调用noteOff(0)的问题。

  function stop() {
    oscillator.noteOff(0);
    fire('stop');
  }

That's it, go play with the demo.

就这样，开始演示。

The demo plays 440Hz (A on 4th octave of the piano) and 880Hz (A on 5th octave) and also lets you punch in a number and see what happens. Probably nice to play with your dog and with sounds at frequencies you cannot hear.

该演示播放440Hz(钢琴第4个八度)和880Hz(第5个八度)。您还可以输入一个数字，看看会发生什么。与您的狗一起玩，并以您听不到的频率听起来很不错。

和弦 (A chord)

Finally, an attempt to play a chord: three frequencies at the same time. C major is C, E and G tones. We have an array of the three frequencies, so loop over the array and create and noteOn three oscillator nodes.

最后，尝试弹奏一个和弦：同时三个频率。 C大调是C，E和G音调。我们有三个频率的数组，因此在数组上循环并创建并noteOn三个振荡器节点。

  var cmajor = {};
  cmajor.yo = function () {
    var oscs = [], o, i, freqs = [261.63, 329.63, 392];
    freqs.forEach(function(freq) {
      o = audio_context.createOscillator();
      o.frequency.value = freq;
      o.connect(audio_context.destination);
      o.noteOn(0);
      oscs.push(o);
    });
    this.oscs = oscs;
    fire('play', '\n - ' + freqs.join('Hz\n - '));
  };
  
  cmajor.no = function () {
    this.oscs.forEach(function(o) {
      o.noteOff(0);
    });
    fire('stop');
  };