サウンド生成のページで, 波形や周波数などの用語が出てきましたが, それは見なかったことにして, なんとかゴリ押しで進めてきた方もいらっしゃると思います. したがって, このページでは, そもそも音って？といったことからスタートし, 音の特性について簡単に解説します. 専門すぎることは解説しないので, そんなの一通り知ってるよ, あるいは, とにかく理屈より, Web Audio APIを利用したアプリケーションを一刻も早く作成したい場合はスルーしてください.
概要をできるだけ簡単に解説するため, 厳密さは犠牲にしています. 音のスペシャリストの方からすると, ちょっと違う…という部分はたくさんあるかと思いますがご了承ください. ただし, あきらかに間違った解説や誤解を招く可能性のある解説については遠慮なくご連絡していただければと思います.
そもそも, 音って何なのでしょうか？
結論としては, 音とは媒体の振動が聴覚に伝わったものと定義することができます. 「媒体」というものが抽象的でよくわからないかもしれませんが, 具体的には, 空気や水です. 日常の多くの音は空気を媒体として, 空気の振動が聴覚に伝わることで音として知覚するわけですが, 同じことは水中でも起きますし, 普段聴いている自分の声は骨を媒体にして伝わっている音です.
図1 - 4 - a. 音の実体
音をテクノロジーの世界で扱うには, 媒体の振動を数式で表現する必要があります. ここで, 「振動」という運動について感覚的でいいので考えてみてほしいのですが, より具体的に考えるために, 地震について考えてみましょう. おそらく, 多くの人が地震は地面が振動していると認識していると思います. したがって, その「振動」と認識する運動の条件を簡単に整理してみましょう.
地震を例にとって整理した「振動」と認識する条件を音に適用するために, 上記の2点を抽象的に表現します.
これらのことから, 音の実体とは, 空気などの媒体が周期的かつ連続的に運動して, その運動が聴覚に伝わったものということになります. ちなみに, 音波という言葉があるように, 音の世界においては, 振動のことを「波」という言葉で表現することがほとんどです. 波も周期的かつ連続的な運動であることは, 感覚的に理解できると思うので, 違和感なくなじめるかと思います. したがって, このサイトでもこれ以降, 「振動」を「波」として表現することにします.
話を元に戻すと, 音 (が伝わる媒体の波) の周期的かつ連続的な運動を表現するためにぴったりな数式があります. それは, sin, cosの三角関数です. ただし, tanは含まれません. その理由は, tanは周期的ではあるのですが, π / 2や -π / 2で ∞ や -∞ になるので, 連続的な運動であるという条件を満たさなくなるからです. また, sinとcosは, (位相が異なるだけで,) 同じ運動を表現しています. (他の学問の世界においてはどうかわかりませんが) 音の世界においてはsin関数で運動を考えることが普通です.
Web Audio APIでも, OscillatorNodeインスタンスのtypeプロパティがとりうる値の1つとして文字列型 'sine' が定義されています (表1 - 3 - b). さらに, sin関数が音の波を表すことから, sin関数をsin波, あるいは, 正弦波と呼ぶことが多いです. したがって, このサイトにおいても, sin関数をsin波, あるいは, 正弦波と表現します.
ここからは少し数学・物理チックな話になってきます. したがって, 無理をせずによくわからなかったことは見なかったことにして進めてください.
ところで, sin波 (sin関数) ってどんな形か覚えてらっしゃいますか？
図1 - 4 - b.
sin波 (正弦波) の形です.
を表しています.
周期的かつ連続的な形に着目してください.
形を思い出したら次は, 具体的に解説するためにパラメータを設定します.
図1 - 4 - c.
sin波 (正弦波) の形です.
を表しています.
形とパラメータに着目
してください.
まず, 縦軸 (y軸) に着目してみます. 縦軸のパラメータは振幅と呼ばれ, 単位はありません. ちなみに, 振幅1のsin波と表現した場合, 図1 - 4 - cのように振幅の最大値が1, 最小値が-1のsin波のことを意味しています.
次に, 横軸 (x軸) に着目してみます. 横軸のパラメータは時間を表しています. 縦軸 (y軸) との関係で表現すると図1 - 4 - cは, ある時刻におけるsin波の振幅値を表した図 (グラフ) と言えます.
ここで, 周期的ということを少し分解して考えてみると, 周期的な運動をするというのは, 何らかのまとまった構成 (形) があって, それが繰り返されている運動であると定義することが可能です. このことをあてはめて, パラメータつきのsin波 (図1 - 4 - c) を見てみます.
すると, 山1つと谷1つを最小の構成として, それが繰り返されている (= 周期性をもつ) ことがわかります.
図1 - 4 - d. 振幅・周波数・周期
この波の最小の構成が発生するために要する時間を周期と呼びます. 例として, 図1 - 4 - cのsin波で考えると, 最小の構成の発生までに1 secの時間を要しているので, 周期は1 secとなります.
この真逆の概念を表す用語が周波数です. すなわち, 1 secの間に, 波の最小の構成が何回発生するか？ということを表し, 単位は Hz (ヘルツ) です. Hz (ヘルツ) という名前ですが, 日本語に翻訳すれば, 何回の「回」に相当するでしょう. 周波数の概念を具体的に理解する例として, 図1 - 4 - cのsin波で考えます. 図1 - 4 - cのsin波は, 1 secの間に最小の構成が1回発生しているので, 周波数は, 1 Hzということになります.
ちなみに, 周期と周波数は互いに真逆の概念ですがこれを数学チックに言えば,互いに逆数の関係にあります. すなわち, 周期の逆数は周波数を表し, 周波数の逆数は周期を表します. 互いに関係のある値なので, 周期の話をすれば周波数の話も同時にしていることであり, 周波数の話をすれば周期の話も同時にしていることになります. ただ, 周波数という用語のほうがよく使われる傾向にあると思うので, このサイトでは, 周波数の用語を優先的に利用することにします.
3つの用語が出てきたところで, これらを整理して理解度をチェックするためにいろんな形のsin波 (正弦波) において, 振幅・周波数 (周期) をそれぞれ考えてみましょう.
図1 - 4 - e.
このsin波 (正弦波) の振幅・周波数は？
図1 - 4 - f.
このsin波 (正弦波) の振幅・周波数は？
いかがでしたか？振幅と周波数はWeb Audio APIの解説においても頻出する用語なので, ある程度理解しておくと, Web Audio APIの理解も進むでしょう.
よくわからなかった…という方も気にしないでください. アプリケーションを作成していくうちに理解できることもありますし, 1つの目標としてとりあえず何かアプリケーション作成するだけなら, ほとんど問題ないでしょう. まずは, パラメータを操作したり, ノードの接続を変えたりしたときに, 音がどんな感じに変化するのか？を感覚でつかむことさえできればなんとかなります.
OscillatorNodeインスタンスのtypeプロパティの値は, 正弦波を表す文字列型 'sine' 以外にも, 矩形波を表す 'square' やノコギリ波を表す 'sawtooth', 三角波を表す 'triangle' があります. 正弦波の形はわかりましたが, それ以外はどのような形をしているのか見てみましょう.
図1 - 4 - g.
矩形波の形です.
周期的かつ連続的な形に着目してください.
図1 - 4 - h.
ノコギリ波の形です.
周期的かつ連続的な形に着目してください.
図1 - 4 - i.
三角波の形です.
周期的かつ連続的な形にに着目してください.
これらの波形で注目していただきたいことは, 矩形波・ノコギリ波・三角波のいずれも正弦波と同じように, 周期的かつ連続的であるということです. また, この性質から振幅や周波数の概念を適用することができます.
そして, 最も重要な点ですが, 周期性をもつ波は周波数の異なる正弦波を合成してできているということです. 矩形波・ノコギリ波・三角波はいずれも周期性をもちます. 周期性をもつので, 矩形波・ノコギリ波・三角波はいずれも周波数の異なる正弦波の集まりということが成立します.
シンセサイザーでも, 正弦波・矩形波・ノコギリ波・三角波は基本波形として, サウンド生成のベースとなる波形です. そして, Web Audio APIにおいても, 基本波形はサウンド生成処理のベースになる波形です. まずは, 名前と形が一致するようになりましょう.
ここまでは数学・物理チックな話が続いたので, 少し気分を変えて, 感覚視点 (知覚) から音を考えてみましょう.
日常でも, テレビを視聴していて「音が大きい・小さい」, 音楽を聴いていて「音が高い・低い」, 楽器を演奏していて「この楽器の音色が好き」などと表現することがあるかな？と思います. これらは, 音を感覚視点, すなわち, 音を知覚するときの視点で, どんな音か？を表現しています.
これらの表現にある, 音の大きさ・音の高さ・音色を音の3要素と呼びます.
OscillatorNodeインスタンスのプロパティの解説で簡単に記載 (表1 - 3 - a) しましたが, これらの3要素と, 先に解説した振幅・周波数・波形と大きな関わりがあります.
| Element | Wave |
|---|---|
| 音の大きさ | 振幅が大きく影響する |
| 音の高さ | 周波数が大きく影響する |
| 音色 | 波形 (エンベロープ) が大きく影響する |
「大きく影響する」という表現に注意してください. 例えば, 音の大きさは振幅のみで決定されるわけではないということです. ここで, その詳細は解説はしませんが, もっと詳しく知りたい方は, 等ラウドネス曲線などを調べてみるといいと思います.
Web Audio APIの基本処理を解説し, 音の特性も解説したところで, Web Audio APIと音の特性をリンクさせたことを中心に解説していきたいと思います.
GainNodeインスタンスのgainプロパティを利用することで, 音の大きさを変更することができました. 物理的な視点で見ると, 音の波の振幅を操作することによって, 音の大きさを変更しています.
OscillatorNodeインスタンスのfrequencyプロパティを利用することで, 音の高さを変更することが可能でした. これは, 物理的な視点で見ると, 音の波の周波数を操作することによって, 音の高さを変更しています. 実装上では, frequencyプロパティのとりうる値の範囲は0 ～ 100000 Hzですが, 楽器アプリケーションなどで出力する音としてはそこまで設定できてもあまり意味はないでしょう. その理由は, 人間が聴きとることが可能な音の周波数の範囲は, 20 ～ 20000 Hz程度だからです.
図1 - 4 - j. 可聴周波数帯域
OscillatorNodeインスタンスのdetuneプロパティを利用して, 音の高さを変更することも可能でした. 物理的な視点でもfrequencyプロパティと同じです. ただし, detuneプロパティは, 音楽的な視点で音の高さを変更します. detuneプロパティの用途は, (音楽で言う) 半音よりも小さい範囲で音の高さを調整したり, オクターブ違いの音を生成・合成したりするために利用します. この機能によって, きめ細かいサウンド生成が可能になったり, サウンドを合成する場合において厚みをもたせることが可能になったりします. シンセサイザーのファインチューン機能や, エフェクターの1種であるオクターバーを実現するためにあると言えるでしょう.
frequencyプロパティの単位はHz (ヘルツ) で, 波が1 secの間に何回発生するのかを意味していました. 一方で, detuneプロパティの単位はcent (セント) です. これは, 音楽の視点から音の高さをとらえた単位で, 1オクターブの音程を1200で等分した値です.
1つ高いラとか, 1つ低いラのことを, 1オクターブ高いラ, 1オクターブ低いラと表現することがあります. 音楽的な視点でのオクターブはまさにそういう意味です.
オクターブを物理的な視点でみると, 周波数比が1 : 2の関係にある音程を意味しています. 具体的に説明すると, いわゆる普通のラ (A) (ギターの第5弦の開放弦) の周波数は440 Hzです. この音を基準に考えると, 1オクターブ高いラの周波数は880 Hzです. 周波数比が, 440 : 880 = 1 : 2になりますね.
話を, centに戻すと, この1 : 2の音程を1200で割った値が1 centというわけです. なぜ, 1200？ と疑問に思う方もいらっしゃると思いますが, ピアノをされる方は直感で理解できると思います. ピアノをされない方のために, 1オクターブの音程間にピアノの鍵盤がいくつあるか数えてみましょう. 1オクターブ間であればいいので, 好きな音から始めてください.
図1 - 4 - k. 1オクターブ間の鍵盤数
数えてみると, 12個の鍵盤があります. 1オクターブ間の音程差を1200で割った (1200分割した) 値が1 centでしたので, 1オクターブ間の音程差を12分割すると, 100 centということになります. つまり, 100 cent音が高くなると, 右隣の鍵盤の音の高さに変わるということです.
例として, 440 Hzのラ (A) の音を100 cent高くすると, 右隣の鍵盤のラ# (A#) に, さらに100 cent高くすると, シ (B) になります. このように, -100 ～ 100 centの間の値を設定することによって, 半音以下の音の高さの調整が可能になるわけです.
また, 1200 cent, あるいは, -1200 centと値を設定することにより, 1オクターブ高く, あるいは, 1オクターブ低く調整することも可能です. ちなみに, 実装上では, detuneプロパティのとりうる値の範囲は, -4800 ～ 4800 centなので, 4オクターブ高い, あるいは, 4オクターブ低い音まで調整可能ということです.
音楽理論では, 1オクターブの音程を12等分した周波数の関係を12平均音律と呼びます. 12平均音律においては, 隣り合う音, つまり, 半音の周波数比は, およそ, 1 : 1.059463 (正確には, 2の12分の1乗) で, これが100 centとなるわけですね.
これは, 基本波形のところでも解説しましたが, typeプロパティの値を変更することによって, 正弦波の合成波である矩形波やノコギリ波, 三角波を生成することができました. それによって, 音色を変化させることが可能です. ちなみに, 波形の概形は (振幅) エンベロープと呼ばれます. 厳密には, 振幅エンベロープが音色に大きく影響しています. この詳細については, エンベロープジェネレータのページで解説します.
このページでは, 音の特性について簡単に解説し, さらに, 音の特性とWeb Audio APIがどう関わっているのかを解説してきました. 解説したことすべてをきちんと理解しないとWeb Audio APIを使えないわけではなく, 重要なことは, パラメータを変化させた場合, サウンドにどう影響するのか？を感覚で理解していることです. ただ, 少しでも知識としてあるほうが, Web Audio APIの仕様の理解のヒントになり, (まだ解説していませんが) ScriptProcessorNodeクラスを利用する場合の基礎となるはずです.
そして, そのはじめの一歩になればと考えて, このページを作成しました. 結構いろんなことを解説したので, 重要なエッセンスを表1 - 4 - bとデモ 16に集約しました. まずは, これらのことを感覚で, そして余力があれば知識として習得してみてください.
| Node | Property | Wave | Element |
|---|---|---|---|
| OscillatorNode | type | 波形 | 音色に大きく影響 |
| GainNode | gain | 振幅 | 音の大きさに大きく影響 |
| OscillatorNode | frequency | 周波数 (物理的) | 音の高さに大きく影響 |
| OscillatorNode | detune | 周波数 (音楽的) | 音の高さに大きく影響 |
デモ 16では, 波形を表示するためにAnalyserNodeクラス (サウンドの視覚化のページで解説します) を利用していますが, コードに関しては理解できなくてもかまいません.
重要なことは, パラメータを変化させると, 音がどんな感じに変化するのか？波形がどう変形するのか？を実際に確認することです.