webaudio

You've heard of WebAudio, but have you done any experimenting with it? This is a series of posts on exploring and discovering various APIs that WebAudio has to offer, by doing something concrete, namely recreate the THX Deep Note sound.

您听说过WebAudio，但是您是否做过任何试验？ 这是一系列有关探索和发现WebAudio必须提供的各种API的文章，通过做一些具体的事情，即重新创建THX Deep Note声音。

If you cannot wait for me to write up everything, the code and slides (these posts are based on a talk) are on Github and also here.

如果您不能等我写下所有内容，可以在Github上和此处找到代码和幻灯片(这些帖子都是基于演讲的)。

深注？ (Deep Note?)

You don't know what Deep Note is? Yes, you do! Here's an example to refresh your memory:

你不知道什么是Deep Note吗？ 是的你是！ 这是刷新内存的示例：

演示地址

This is a sort of an audio logo that was meant to be used with the THX visual logo. The engineer who coded the audio logo, James Andy Moorer, tells the story in this 2-part podcast. It's actually pretty entertaining. There's some more info thanks to his son, who's on Reddit.

这是一种音频徽标，应与THX视觉徽标一起使用。 编码音频徽标的工程师James Andy Moorer在这个分为两部分的播客中讲述了这个故事。 这实际上很有趣。 还有更多信息要感谢他的儿子，他在Reddit上。

The idea was to create a sound that comes out of nowhere, out of chaos and turns into something meaningful. Chaos to order. Mr.Moore was inspired by two pieces: one by J.S.Bach (start at 0:20) and one by The Beatles (start at 3:30 mark).

这个想法是要创造出无处不在，混乱而变成有意义的声音。 乱订购。 摩尔先生的灵感来自两件作品：一件来自JSBach(从0:20开始)和一件来自甲壳虫乐队(从3:30开始)。

演示地址

演示地址

分数”(The "score")

Oh and the "score" for the composition was released not too long ago:

哦，不久之后就发布了该作品的“得分”：

那我们知道些什么？ (So what do we know?)

After listening to the interviews and reading the comments on Reddit, what do we know about how Mr.Moorer decided to approach creating this signature sound? And what we can do to mimic the process as close as possible?

在听完访谈并阅读了有关Reddit的评论之后，我们对Moorer先生如何决定创建这种签名声音的方式了解多少？ 而我们能做些什么来尽可能模仿这个过程呢？

• There are 30 "voices" (distinct sounds), because this was the limitation of the ASP (Audio Signal Processor) that was available at the time.
  有30个“声音”(声音不同)，因为这是当时可用的ASP(音频信号处理器)的限制。
• There are 11 notes in the score. So - 11 notes and 30 voices. Which voice plays which note? The score says the top note is played by three voices, and the two bottom ones by 2 voices each. That makes 8 (middle) + 3 (top) + 4 (bottom) = 15. My guess is then every one of these voices was doubled again, so that's 8 x 2 (middle), top note x 6, 2 bottom ones x 4. Total of 30. It's inconceivable to think he had access to 30 voices and didn't use them all!
  乐谱中有11个音符。 所以-11个音符和30个声音。 哪个声音弹哪个音符？ 乐谱显示高音由三个音色演奏，两个低音由2个音色演奏。 这使8(中)+ 3(上)+ 4(下)=15。我的猜测是，这些声音中的每一个都再次加倍，因此是8 x 2(中)，前调x 6、2下一个x 4.总共30个。以为他可以使用30种声音却没有全部使用这是不可思议的！
• Each voices changes pitch over time. They start as a tight cluster (200 to 400Hz), wiggle around a bit and then slowly move to their final destinations of the final chord.
  每个声音都会随着时间变化音调。 他们开始时是一个紧密的簇(200至400Hz)，稍微摆动一下，然后慢慢移至最终和弦的最终目的地。

• Each voice plays and manipulates a single cello sample. Most of the notes are D (the final chord is D major) so probably the sample was D too. But because we can re-pitch it (and we have to, see next point) we can start with any old sample. I found one C on the web and thought I should start there. So obviously right off the bat we lose all hope of recreating the exact same end effect, but that's not the ultimate purpose of these posts. We're here to learn WebAudio. Plus the cello sample is actually from a synthesizer, so maybe not a real cello at all. Plus, the program that Mr.Moorer created is random and they actually had troubles recreating the same result with the same program after they lost the original recording. Heee-heee.

  每个声音播放和操纵一个大提琴样本。 大多数音符是D(最后的和弦是D大调)，因此样本也可能是D。 但是，因为我们可以重新设定音高(我们必须要看下一点)，所以我们可以从任何旧样本开始。 我在网上找到一个C，并认为我应该从那里开始。 因此，显然，我们马上失去了重新创建完全相同的最终效果的所有希望，但这并不是这些文章的最终目的。 我们在这里学习WebAudio。 再加上大提琴样本实际上来自合成器，因此可能根本不是真正的大提琴。 另外，Moorer先生创建的程序是随机的，在丢失原始记录后，他们实际上很难用相同的程序重新创建相同的结果。 嘻嘻

• The D (D3, meaning the first D below middle C) was pitched to 150Hz. Which is not what our current Western equal temperament tuning is using. We're used to D3 being 146.83Hz. But 150 is easier to multiply (or reason about), I guess. And maybe this tiny discrepancy (150 is between D3 and the next D#3) just helps make the sound more alien and interesting (wild guess). FYI the nice round number the modern Western equal temperament is using is actually 440Hz, the A above middle C.

  D(D3，表示中线C以下的第一个D)的音调为150Hz。 这不是我们当前的西方平均气律调整所使用的。 我们习惯D3为146.83Hz 。 但是我猜想150更容易相乘(或推理)。 也许这个微小的差异(D3和下一个D＃3之间有150个差异)只会使声音更加陌生和有趣(疯狂的猜测)。 仅供参考，现代西方平均律所使用的精确轮数实际上是440Hz，中间C之上的A。

• He used just tuning as opposed to equal temperament tuning. It's a fascinating thing, tuning systems. Feel free to skip, but I'll try a short explanation. Ancient Greeks, obsessed with perfection and ratios, figured that when two notes sound good together, the string that produces the first note is double the length of the second. Which is also double the frequency. This is what we call an interval of an octave now. A4 is 440Hz, the next A (A5) is 880Hz. A3 is 220, and so on. So 2:1 ratio. Next 3:2 ratio also sounds good together. And 4:3. These 3 ratios are so perfect that they are still called perfect today: perfect octave, perfect fifth, perfect fourth.

  他只使用调律而不是相等的气质调律。 令人着迷的是调优系统。 随意跳过，但我会尝试简短的解释。 痴迷于完美和比率的古希腊人认为，当两个音符在一起听起来很好时，产生第一个音符的弦长是第二个音符长度的两倍。 这也是频率的两倍。 这就是我们现在所说的八度音程。 A4为440Hz，下一个A(A5)为880Hz。 A3是220，依此类推。 所以2：1的比例接下来的3：2比例也听起来不错。 和4：3。 这三个比率是如此完美，以至于今天它们仍被称为完美：完美的八度，完美的第五，完美的第四。

  

  The problem (called

  问题(称为

  Pythagorean comma) is that if you continue diving the string in perfect ratios, you don't get the same note an octave above. Bummer! For the longest time people dealt with this by slightly compensating some of the notes, to taste. Eventually equal temperament was invented where we said "Enough! Divide the octave into twelve notes with equal ratios between them!" The ratio is 12th root of 2, or about 1.05946. As a result nothing is ever perfectly in tune (except octaves). As opposed so some notes not in tune. But we got used to it. Singing doesn't have fixed pitches, so you can still hear perfectly tuned chords in vocal music, e.g. choirs and barbershop quartets. But for the most part, it's rare for us today to hear. Deep Note's chord though is perfectly tuned, maybe that's another reason for it sounding a tad alien. The chord is a D major which means it has three notes: D, A and F# and they are repeated. A lot of Ds, some As and a single F#. All Ds are 2:1, the As are 3:2 and the F# is 5:4

  毕达哥拉斯(Pythagorean逗号)表示，如果您继续以理想的比例潜水琴弦，则不会在八度音阶上得到相同的音符。 mm！ 在最长的时间里，人们通过稍微补偿一些音符来解决这个问题。 最终发明了相等的气质，我们说：“足够了！将八度音阶分成十二个音符，它们之间的比率相等！” 该比率是2的12根，即大约1.05946。 结果，除了八度之外，没有什么是完美的。 与之相反，有些音符不合时宜。 但是我们已经习惯了。 唱歌没有固定的音调，因此您仍可以听到声乐中调音完美的和弦，例如合唱团和理发店四重奏。 但是在大多数情况下，今天对于我们来说很少见。 尽管Deep Note的和弦已经过微调，但这也许是它听起来有点外星人的另一个原因。 和弦是D大调，意味着它具有三个音符：D，A和F＃，并且它们被重复。 许多D，一些As和一个F＃。 所有D均为2：1，As为3：2，F＃为5：4

So the notes of our final chord will be:

因此，我们最后的和弦音符为：

const notes = {
D1: {rate: 1/4, voices: 4},
D2: {rate: 1/2, voices: 4},
A2: {rate: 3/4, voices: 2},
D3: {rate: 1,   voices: 2},
A3: {rate: 3/2, voices: 2},
D4: {rate: 2,   voices: 2},
A4: {rate: 3,   voices: 2},
D5: {rate: 4,   voices: 2},
A5: {rate: 6,   voices: 2},
D6: {rate: 8,   voices: 2},
Fs: {rate: 10,  voices: 6},
};

And this is how the notes look on the piano keyboard (the picture is from my web midi keyboard, check it out):

这就是钢琴键盘上音符的外观(图片来自我的网络midi键盘，请查看)：

好啦 (Alrighty)

That's enough verbiage to get us off the ground, let's start making some noise in the next post! The plan of attack is to learn about WebAudio in this manner:

这足以使我们动起来，让我们开始在下一篇文章中发出一些声音！ 攻击的计划是以这种方式了解WebAudio：

1. Learn to play one sound - our cello sample. Fetch from the server, decode the audio, createBufferSource(), connect it to the speakers/headphones and start it. We'll have to deal with some Safari inconsistencies.

   学习演奏一种声音-我们的大提琴样本。 从服务器获取，解码音频， createBufferSource() ，将其连接到扬声器/耳机，然后启动它。 我们将不得不处理一些Safari不一致的问题。

2. Learn about how WebAudio uses nodes that you connect together.
   了解WebAudio如何使用连接在一起的节点。

3. Loop the sound using the loop property of the buffer source object. The sample is too short and the deep note is a little longer.

   使用缓冲源对象的loop属性循环播放声音。 样本太短，深音有点长。

4. Repitch the sound using the playbackRate property of the buffer source. We need to do this because the sample is C not D and also the D is the weird 150Hz and also there are 11 distinct notes. So whole lotta pitching.

   使用缓冲源的playbackRate属性重复playbackRate声音。 我们需要这样做，因为样本不是C，也不是D，而且D是奇怪的150Hz，并且还有11个不同的音符。 所以整个乐透投球。

5. Play 30 notes using 30 buffers from the same sample. Learn about the Gain (volume) node otherwise 30 simultaneous notes are a little loud.
   使用来自同一样本的30个缓冲区播放30个音符。 了解“增益(音量)”节点，否则30个同时出现的音符会有点响。

6. Learn about scheduling changes with setValueAtTime(), linearRampToValueAtTime(), exponentialRampToValueAtTime() and setTargetAtTime(). This is because the voices change frequencies. And volume.

   了解有关使用setValueAtTime() ， linearRampToValueAtTime() ， exponentialRampToValueAtTime()和setTargetAtTime()安排更改的信息。 这是因为声音会改变频率。 和音量。

7. Figure out a bunch of sweeteners: compression (even out peaks), EQ (filtering frequencies), reverb (like echo, using convolution), and panning (moving from one speaker to the other).
   找出一堆甜味剂：压缩(甚至消除峰值)，EQ(滤波频率)，混响(如回声，使用卷积)和声像(从一个扬声器移动到另一个扬声器)。
8. Signal flow: creating a graph of WebAudio nodes, split the signal, apply different processing to different part of it, merge back.
   信号流：创建WebAudio节点图，拆分信号，对信号的不同部分进行不同的处理，然后合并回去。
9. Record the results so we can put them on the radio!
   记录结果，以便我们将其广播！
10. Visualize what we've done with these frequencies.
    可视化我们对这些频率所做的工作。

Fun times ahead!

欢乐时光即将来临！

Tell your friends about this post on Facebook and Twitter

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

翻译自: https://www.phpied.com/webaudio-deep-note-part-1/

webaudio