Posted at

WebAudioの基礎まとめ。(NodeSchoolのWeb Audio Schoolをやってみたときの備忘録、レッスン00〜02まで)

More than 1 year has passed since last update.

WebAudio初心者です。

NodeSchoolにWebAudioのレッスンがあったのでやってみました。

英語ですが、なかなか分りやすい。

そのときのメモです。


はじめ方

ターミナルで、

$ npm install -g web-audio-school

と打ち、workshopperをインストールしましょう。

そして、

$ web-audio-school

とすると、勝手にブラウザでレッスン画面が立ち上がります。

ちなみにレッスン画面はこんな感じ。

WebAudio.png

左上に問題とヒント、右上にコードを書いていくとこ、

左下は正解の音が聴ける、右下は自分が書いたコードによる音が聴けます。


レッスン0:オシレーターで音を鳴らし、波形の種類を設定する。(00. Browser make sound!)

まずはWebAudioAPIを使うには、AudioContext()を生成します。

var audioContext = new AudioContext()

そして、WebAudioAPIを使って音を生成していくには、下図のようにいろんなNodeをつなげていくイメージです。

image

※画像はレッスンからの引用

次に、オシレーター(音の元となる波形を作り出すもの)を生成してみます。

下記なようなオシレーターノードを作り、destinationに繋いで(connectして)いきます。

var oscillator = audioContext.createOscillator()

oscillator.connect(audioContext.destination)

oscillator.start(audioContext.currentTime)
oscillator.stop(audioContext.currentTime + 2) //2秒で止まるよ

レッスン0の問題は波形の種類を変えてみましょう、というもの。

波形は下記4種類あり、

'sine', 'triangle', 'sawtooth', and 'square'

その中でデフォルトとなっているのはsineです。

①sine ... サイン波

②triangle ... 三角波

③swatooth ... 鋸歯(きょし)状波

④square ... 矩形波

図でいうと、

①sine ... サイン波

image

画像引用先

②triangle ... 三角波

image

画像引用先

③swatooth ... 鋸歯(きょし)状波

image

画像引用先

④square ... 矩形波

image

画像引用先

これらの波形の種類を指定するには、下記のように書きます。

oscillator.type = 'square'


レッスン1:オシレーターの周波数を設定してみる。(01. Play a pitched sawtooth wave)

オシレーターノードにはfrequencyってプロパティがありますが、下記のようにやるとうまくいきません。

//これはうまくいかないよ

oscillator.frequency = 200

下記のように設定しましょう。

js

oscillator.frequency.value = 880


レッスン2:半音階(02. Chromatic Scale)

(ここらへんから音楽の知識ないときつくなってくる。。。orz)

半音階における周波数は、440Hzの「ラ」を基準(MiddleA)とし、1オクターブ高い「ラ」が880Hzで、1オクターブ低い「ラ」が220Hzといった具合に、1オクターブ上がると周波数が倍になるように計算されているので、すこし複雑なので、

baseFrequency * Math.pow(2, noteOffset / 12).って式を使いましょう、という話。

具体的には、

js

oscillator.frequency.value = 440 * Math.pow(2, 7 / 12) // 659.255...

oscillator.frequency.value = 440 * Math.pow(2, -14 / 12) // 195.998...



といった感じ。

noteOffsetにあたる数字は下記な感じです。(レッスンから丸パクり)

                         -3  -1   1       4   6       9   11

-4 -2 0 2 3 5 7 8 10 12
.___________________________________________________________________________.
: | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | :
: | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | :
: | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | :
<-: |_| | |_| |_| | |_| |_| |_| | |_| |_| | |_| |_| |_| | |_| |_| :->
: | | | | | | | | | | | | | | | | | | :
: A | B | C | D | E | F | G | A | B | C | D | E | F | G | A | B | C | D | E :
:___|___|___|___|___|___|___|___|___|___|___|___|___|___|___|___|___|___|___:
^ ^ ^ ^ ^
220 Hz 440 Hz 523.25 Hz 880 Hz 1174.65 Hz
(-1 Octave) (middle A) (+1 Octave)

あるいはdetunesを使うともっと簡単に表現できます。

detunesは、440Hzの「ラ」を基準(MiddleA)=100として、100ごとに1音階上がっていくイメージです。

なので、「ラ#」なら200、「シ」なら300、「ド」なら400、、、といった感じです。

下記のように設定します。

oscillator.detune.value = 700 // noteOffset * 100


レッスン3:(03. Play a short sequence of notes)

Comming Soon...