マトリックスシーケンサーとは

マトリックスシーケンサーとは、整列配置されたボタンをトグルしてループミュージックを奏でる事ができるシーケンサーです。

多くの場合縦軸が音階を、横軸がフレーム（時間）を表し、 左から右にフレームが移動してONにされたボタンに割り当てられた音が鳴る仕組みです。 縦軸の「音」はスケール（調）に則って配置されているので、 相当いい加減にやってもまともな演奏になってしまう所がマトリックスシーケンサーの魅力の一つです。

ハードで知られているのがYAMAHAの「TENORI-ON」ですが現在は生産完了品で、 同製品をiOSアプリにした「TNR-i」/「TNR-e」がリリースされています。 また、その他にも無料・有料含めてiOS向けのマトリックスシーケンサーアプリは多数リリースされています。

• TENORI-ON – ヤマハ株式会社

作ってみた物: ToneGrid.js

今回は JavaScript + Web Audio API でマトリックスシーケンサーを再現してみました。 勿論 Web Audio API に非対応の環境ではウンともスンとも言いませんので悪しからず。 Chrome/Firefox/Safariあたりで動作確認しています。

「PLAY」ボタンを押すと演奏が開始されるので、配置されているボタンやコントロールを適当にポチポチ押して遊んでみてください。

• デモ: ToneGrid Demo
• リポジトリ: mach3/tonegrid.js

特徴

オルゴールのように各音階のオシレータを用意してタイミングをあわせてボリュームを変更する仕組みです。

• スピード・サウンドのイージングを調節できる
• スケール（調）を変更できる
• 音の種類は、Web Audio APIにデフォルトから実装されている Sine/Square/Triangle/Sawtooth から選択可能

未定な予定

• SMF形式への変換機能でもつけてみようかとも思っていますが、 使われるかどうかわからないので、あくまでも「気が向いたら」
• iOSでも動かなくはないですが、使いやすいように整形してあげたいです。

まとめ

Webの技術で楽器が作れる時代です。 楽器をやる人間としては、楽しい事この上無いですね。現場からは以上です。

TOOTNE [ツートン]

TOOTONE [ツートン] – モールス信号で遊び、学ぶ。

TOOTONEは、モールス信号で遊びながら学ぶアプリケーションです。
手で打ったり、テキスト変換をしたりしながら思う存分ツートンしましょう。

「JavaScriptでモールス信号」というのは少し前から課題にしていたのですが、 ある程度まとまった形になったのでWebアプリケーションにしてみました。

使い方

誰しもおおまかな所はしっているとは思いますが、「モールス信号」そのものについては Wikipediaの説明 でも見て頂くとしましょう。

TOOTONE では次の4つの方法でツートンする事ができます。

1. キーボードの「T」をたたく
2. マウスでクリックする
3. スマートフォン・タブレット端末でタッチする
4. 文章を入力して変換する

「判定がシビアだ！」といった声を頂いておりますが、がんばってください。 長点と短点の差をハッキリさせて、ゆっくり打つのがコツです。

ツートン辞書をみる

アルファベット・カナ別に変換テーブルを掲載しています。 分からなくなったら参照してみましょう。

記録して、シェアする

「記録」ボタンを押してツートンするか、「テキスト入力」モードで文章を入力すると、 そのメッセージをURLで「シェア」する事ができます。 シェアしたメッセージをお友達に送ってあげましょう。

TOOTONE [ツートン] – お預かりしているツートンメッセージです

こぼれ話など

以前LT枠で参加させて頂いた「HTML5飯」では「Web Audio APIとモールス信号」をお題とさせていただきました。 （発表のスライドはこちら）

LTした時点ではオシレータについてよく理解していなかったので、信号の音声ファイルを作ってそれを読み込んで再生していましたが、 参加者の方からオシレータを勧められて試しに実装してみたところ、中身が非常にシンプルにまとまるではないですか！ さらに、悩まされていた iOS での不具合も解消されているのです。

これは面白いと思って、ついつい脇道にそれまくって出来上がったのが Oscy.js でした。 （楽器はTOOTONEの後に着手しようと思っていたのですが…）

cf) Web Audio API の Oscillator で楽器を作りたい話 – Mach3.laBlog

まとめ

Web Audio API 面白いですね！

対応環境が増えて普通に使えるようになる日を心待ちにしています。

Oscillator で楽器を作りたい！

こちらが当日の資料です。ざっくり言うと…

• Oscillator はオシレーターであってオスシレーターではない
• Oscillator は周波数・デチューン・波形をいじることでいろんな音になる
• 作ってみた物の紹介・デモ

といった内容をお話しました。

作ってみたデモ（Oscy.js）

そして作ってみたデモがこちら。 触ると音が出るのでご注意ください。

• Oscy.js (http://mach3.github.io/oscy.js)

Web Audio API に対応していない環境ではウンともスンとも言わないどころか描画もしませんのでご了承ください。 デスクトップのChromeやFirefox、iOS Safariなどで動きます。 Android は Chrome等であれば動くようです。

Oscillator の使い方をものすごくざっくり説明する

環境によってクラス名やメソッド名が違ったりするのでご注意ください。 AudioContext が webkitAudioContext だったり、createGain が createGainNode だったりします。

とりあえず鳴らす

まずはじめにAudioContextを用意します。

var context = new AudioContext();

次に、Oscillatorノード（音を生成する人）と Gainノード（音量を調節する人）を用意します。

var oscillator = context.createOscillator();
var gain = context.createGain();

これらを出力先（destination）に接続します。Gainノードは生成元と出力先の間に挟まってエフェクタのように機能します。

// oscillator => gain => destination
oscillator.connect(gain);
gain.connect(context.destination);

音を出します。

oscillator.start(0); // < プーーーーーーーーー

音を変えてみる

周波数（frequency）・デチューン（detune）・波形（type）を変える事で様々な音に変化します。 音量の調節は Gainノードで行います。

// AからA#の音にかわります
oscillator.frequency.value = (440 * 1.06);

// 微妙に音高がかわります
oscillator.detune.value = 100;

// "sine" から "triangle" の音に変わります。少し硬い音になります。
oscillator.type = "triangle";

// 音量の調節はGainノードで調節します。
gain.gain.value = 0.5;

調べていきたい事・課題など

リバーブエフェクト

デモでは音量をイージング関数でいじって似非リバーブエフェクトをかけていますが、 Convolver を使う事でより自然な音響効果を付与する事が出来るようです。 その為には音響効果の元となるインパルスレスポンス（IR）データが必要になります。 IRデータをシェアするWebサイト等もあるので参考にしてみましょう。

• Free Reverb Impulse Responses – Voxengo
• OpenAIR | The Open Acoustic Impulse Response Library

自作の波形テーブル

createPeriodicWave / setPeriodicWave を使用して自作の波形テーブルを指定する事で様々な音色を出すことができます。 が、スペクトラムとかハーモニクスとかフーリエとかちょっとなにいってんのかぜんぜんわかんないので、今度の課題にしましょう。

Chromiumのリポジトリに波形テーブルのサンプルがありましたので、こちらも参考まで。

• http://chromium.googlecode.com/svn/trunk/samples/audio/wave-tables

まとめ

音の生成はちょっと踏み込むとドツボにはまりそうな奥深さがありますが、かなり面白いテーマですね。 またアップデートしていきたいと思います。