Web Synthesizer

スマホのブラウザで動作するシンセサイザー

スマホのブラウザの制限が厳しいので「最低限の機能に絞る」か「複数のツールに分ける」かですが、今回は後者を選びました。
最初のシンセサイザーはWordPress上で動作させるというコンセプトの制約で、妥協した部分も有りますが他のツールでほぼ補えたと思います。

シンセサイザー 9台と編集／加工ツール 8台エフェクター 6台が有ります。各ツール間は普通のwavファイルで移動するので、自分でwavを用意すれば音の素材は無限です。

特徴は「スマホのブラウザで安定動作する軽さ」と「JavaScriptで作成したメンテナンス性」と「ツールを分割した拡張性」です。
各ツールは安定動作する範囲内ですが、かなり拘こだわった作りになっています。
スマホのブラウザで動作するシンセサイザーシステムとして最強クラス(に近い)と思います。

操作は意外と簡単でちょっと弄いじればすぐに使いこなせる仕様です。

ここで下に用意したメロディで基本操作を順に説明します。

ステップ (1-8)	ステップ (9-16)	ステップ (17-24)	ステップ (25-32)
1: C4 (ド)	9: F4 (ファ)	17: C4 (ド)	25: C5 (ド)
2: E4 (ミ)	10: A4 (ラ)	18: D4 (レ)	26: B4 (シ)
3: G4 (ソ)	11: C5 (ド)	19: E4 (ミ)	27: A4 (ラ)
4: C5 (ド)	12: F5 (ファ)	20: F4 (ファ)	28: G4 (ソ)
5: C5 (ド)	13: G4 (ソ)	21: G4 (ソ)	29: F4 (ファ)
6: G4 (ソ)	14: B4 (シ)	22: A4 (ラ)	30: E4 (ミ)
7: E4 (ミ)	15: D5 (レ)	23: B4 (シ)	31: D4 (レ)
8: C4 (ド)	16: G5 (ソ)	24: C5 (ド)	32: C4 (ド)

初めにこのメロディを鳴らします。
今回は楽器別シンセサイザーの「Piano & Bell」を使ってみます。
シンセサイザーの画面を開いたらそのまま右上の「WAV SAVE」を押します。これでスマホのダウンロードホルダーにWAVファイル(音源)が保存されます。
※初期状態で使える音になっています。
これでシンセサイザーの音源が入手できました。

crystal_tone.wav

次はこの音を使って演奏します。
今度はサンプラー兼シーケンサーの「Master Studio 32 」を使います。
左上の「ファイルの選択」で先程ダウンロードしたcrystal_tone.wavを選びます。
読み込んだ音源ファイルは自動で12音階(ドレミファソラシ)になります。
その後の音程は「SCALE(音階)」で選べます。
オクターブは「OCTAVE」で変更できます。
あとはこのページのメロディを番号通りに入力します。
※C4はSCALE(音階): C , OCTAVE: 4
C5はSCALE(音階): C , OCTAVE: 5

「PLAY/STOP」で音を鳴らしながら入力すると楽です。
入力を間違えたらもう一度押すと取り消されます。
入力が終わったら好きな名前を付けてダウンロードして完成です。
※他の人に渡したりネットで使うときは「mp3 コンバーター」でファイルサイズを小さくしましょう。(Master Studio 32 の少し下に有ります。)

Sample Melody 1

「Master Studio 32 」は5段階のベロシティ対応なので音に強弱を付けましょう。
操作はPADに音符を置く前に音階とオクターブとベロシティをセットで選びます。
今回は偶数だけ弱くして置き直します。

Sample Melody 2

「Master Studio 32 」の画面を閉じると入力したデータは消えますが、開いたままの状態であればスマホにダウンロードしてある他の音に差し替えられます。
※他のブラウザと併用すれぱ音を作りながら使えます。

試しにシンセサイザーの音を使ってみます。
と言ってもいきなり波形を編集するわけでは無く、「波形サンプル」の音を直接ダウンロードして使います。
波形サンプル piano

Sample Melody 3

ここまでで出来る事
楽器別シンセサイザー(音作りはスライダーを動かすだけでOK)の操作。
※ブラウザを開き直すか再読み込みすればリセットできます。
※これだけで曲作りに必要な音は揃います。

サンプラー兼シーケンサーの操作。
※BPM(テンポ)の変更は簡単です。
※Master Studio 16は1小節分、Master Studio 32 は2小節分です。

これ以外で曲作りに必要(有ると便利)なものは他の楽器と混ぜる「ミキサー」とシーケンス(フレーズ／小節)を連結する「シーケンスチェイン」です。
※どちらも今まで以上に簡単です。

次はドラムを例に「ミキサー」を説明します。

ステップ	1	2	3	4	5	6	7	8
Kick	●				●
Snare					●
H.Hat	●	●	●	●	●	●	●	●
(9～16,17～24,25〜32ステップも同様の繰り返し)

先程と同様に楽器別シンセサイザーの初期状態のまま「キック」「スネア」「Hi-Hat」をダウンロードします。
※1度に使うのは1つづつなのでまとめてダウンロードする必要はありません。

ドラムキック

ドラムスネア

ドラム Hi-Hat

今回もMaster Studio 32を使います。
音程は気にしなくて良いのでC4だけで入力します。

ドラムキックライン

ドラムスネアライン

ドラム Hi-Hat ライン

3つのコードが揃いました。
これをミキサーで合成します。
それぞれのファイルをミキサーのチャンネルに割り振ります。
横移動のスライダーが左右に振るPANです。
※PANは[C]ボタンで中央に戻ります。
※ミキサーはブラウザを閉じても初期化しません。

今回はスネアとHi-Hatを少し右にずらしました。

ドラムセット

ミキサーの詳しい使い方はミキサー横の「📝説明」を読んでください。
今回はファイルの読み込みとPANの操作だけでした。

次はベースを入力します。
ベースもメロディと同様、楽器別シンセサイザーからそのままダウンロードします。
これもMaster Studio 32で作成します。
通常、ベースは2オクターブ下ですが初期値をダウンロードした場合は既に2オクターブ低いのでオクターブの変更は要りません。(C2→C4のままでOK)

1- 8	C2	–	C2	–	C2	–	C2	–
9-16	F2	–	F2	–	F2	–	F2	–
17-24	G2	–	G2	–	G2	–	G2	–
25-32	C2	–	C2	–	C2	–	C2	–

ベース

思った以上に音が小さいのでこのままでは他の楽器に埋もれて仕舞います。

ベースコード

新しく音を作るより手軽な方法で解決します。
楽器別シンセサイザーからダウンロードしたベース音をエフェクターに通します。
今回は「Distortion」と「Analog Saturator」を使って負けない音にします。
と言っても難しい事はありません。
「Overdrive / Distortion」にWAVファイル(ベースの音)を読み込んでDistortionを選んでダウンロードするだけです。
Distortionを通したファイルをSaturatorにも同様に通します。

エフェクト加工