实时 webaudio_WebAudio：实时输入

实时 webaudio

Live input, aka getUserMedia: it exists in Chrome Canary for audio too. Great times to be a web developer, right?

实时输入，也称为getUserMedia ：Chrome Canary中也存在音频输入。 成为网络开发人员的美好时光，对吗？

Let's check it out.

让我们来看看。

Here's the demo, but first a prerequisite: go chrome://flags, search for "Web Audio Input" and enable it. Restart Chrome Canary.

这是演示，但首先要满足的条件：转到chrome：// flags ，搜索“ Web Audio Input”并启用它。 重新启动Chrome Canary。

带着吉他 (With a guitar)

I wanted to have a little trickier setup and capture guitar sound not just voice with a microphone.

我想进行一些棘手的设置并捕获吉他声音，而不仅仅是用麦克风发声。

As always, it was bigger hurdle to get guitar sound to the computer, than anything else JavaScript-wise.

与往常一样，将吉他声音传到计算机的障碍比JavaScript明智的要大。

I have a guitar amp that has a mini-USB out. This goes to the USB of the computer. Wrestle, system settings, garage band to the rescue.... eventually the computer makes sound.

我有一个带迷你USB输出的吉他放大器。 这将转到计算机的USB。 摔角，系统设置，救援带...。最终计算机发出声音。

捕捉 (Capturing)

I was assuming the stream you get from getuserMedia can go directly to an HTML <audio> src. No such luck. Works for video but not yet for audio.

我假设从getuserMedia获得的流可以直接转到HTML <audio> src 。 没有这种运气。 适用于视频，但不适用于音频。

So... WebAudio API saves the day.

所以... WebAudio API节省了一天。

Setting up audio context (like in the previous post), shimming getUserMedia and setting up callbacks for it:

设置音频上下文(如上一篇文章中所示)，填充getUserMedia并为其设置回调：

  // for logging
  function fire(e, data) {    
    log.innerHTML += "\n" + e + " " + (data || '');
  }
 
  // globals
  var audio_context;
  var volume;
 
  // one-off initialization
  (function init(g){
    try {
      audio_context = new (g.AudioContext || g.webkitAudioContext);
      fire('Audio context OK');
      // shim
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      fire('navigator.getUserMedia ' + (navigator.getUserMedia ? 'OK' : 'fail'));
      // use
      navigator.getUserMedia(
        {audio:true},
        iCanHazUserMedia, 
        function(e){fire('No live audio input ' + e);}
      );
    } catch (e) {
      alert('No web audio support in this browser');
    }
  }(window));

When the user loads the page, here's what they see:

用户加载页面时，会看到以下内容：

In my case I select the guitar amp and click "Allow" button.

就我而言，我选择吉他放大器并单击“允许”按钮。

This little window informs me the page is using the audio input:

这个小窗口告诉我页面正在使用音频输入：

播放中 (Playing back)

Now that the user has allowed audio access, let's play back the audio we receive, but pass it through a volume control.

现在，用户已允许访问音频，让我们播放接收到的音频，然后将其通过音量控制。

All this work happens in the iCanhazUserMedia(), the success callback to getUserMedia.

所有这些工作都发生在iCanhazUserMedia() ，它是getUserMedia的成功回调。

  function iCanHazUserMedia(stream) {
    
    fire('I haz live stream');
    
    var input = audio_context.createMediaStreamSource(stream);
    volume = audio_context.createGainNode();
    volume.gain.value = 0.8;
    input.connect(volume);
    volume.connect(audio_context.destination);
    
    fire('input connected to destination');
  }

What we have here (ignoring fire()):

我们在这里拥有什么(忽略fire() )：

1. setup an input stream from the user stream, this is the first node in the audio chain
   从用户流设置输入流，这是音频链中的第一个节点
2. setup a volume (Gain) node with initial volume 0.8 out of 1
   设置一个初始体积为0.8的体积(增益)节点
3. connect input to volume to output/speakers
   将输入连接到音量到输出/扬声器

And this is it!

就是这样！

Additionally an input type=range max=1 step=0.1 can change the volume via volume.gain.value = value;

另外， input type=range max=1 step=0.1可以通过volume.gain.value = value;更改音量volume.gain.value = value;

Go play! Isn't it amazing that you can now grab microphone or any other audio input and play around with it? All in JavaScript, all in the browser without any plugins.

去玩！ 您现在可以抓住麦克风或任何其他音频输入并进行播放，这是否令人惊讶？ 全部使用JavaScript，全部使用浏览器，没有任何插件。

ar！ (Moar!)

This was a very basic exploratory/primer example. For more:

这是一个非常基本的探索/入门示例。 有关更多：

• Pedalboard.js with more effects besides volume

  Pedalboard.js除了音量外还有更多效果

• One of Chris Wilson's demos has even more effects

  克里斯·威尔逊(Chris Wilson)的一个演示甚至产生了更多影响

• and how 'bout a guitar tuna

  以及如何弹吉他金枪鱼

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/webaudio-live-input/

实时 webaudio