Javascript プログラミング 楽器

ブラウザでいろんなクラーベを鳴らせるアフロキューバンメトロノームをTone.jsで製作

 

民族音楽には独特の拍子パターンがあったりする

 

民族音楽では、独特の拍子パターンがリズムの基本となっていることがあります。

日本の音頭なんかでも「ちょちょんがちょん」みたいな手拍子がリズムのベースになっていますよね。

この拍子パターンが凄いのは「ちょちょんがちょん」と１回叩いただけで、"これからやる音楽が音頭であること"、"テンポ"、"フィーリング"など多くの情報が瞬時に伝わることです。もちろん、通じるのは文化を共有している人だけですが、まさに以心伝心という感じ。

ほかにも、我々は「よ〜〜〜」と両手を広げただけで、瞬時に一本締めか三本締めであることを察して、ぴったりのタイミングで手を叩けます。これって本当に凄いことですよね。

私がちょっとかじっているアフロキャーバン音楽では、クラーベといわれるパターンがいくつかあります。

音頭の手拍子と同様、演奏時に必ず鳴らすとは限らないのですが、練習の時に鳴らしておくとテンポとフィーリングの両方を感じられて便利です。

このアプリは、よく使われるクラーベをさくっとスマホやPCで鳴らせるように作りました。

 

 

アプリはこちらで試せます。

Afro cuban metronom (github pages)

ソースコードもあるのでJavascriptの分かる方は自分で使いやすいようにカスタマイズしてください。

ソースコード

 

ブラウザでの自動演奏に便利なTone.jsライブラリ

 

このアプリはTone.jsというJavascriptライブラリを使っています。

Tone.js

Tone.jsは非常に多機能なのですがこのアプリでは以下の3つの機能を利用しています。

  • サンプリング音を楽器として登録する
  • 登録したサンプリング音を鳴らす
  • 設定した間隔で任意の関数を呼び出す

3つめの任意の間隔で関数を呼び出せるだけでなく、指定した正確なタイミングで音を鳴らせます。

これによりTone.jsは自動演奏アプリの作成を簡単に行うことができます。

 

Tone.jsの基本設定とサンプリング音源のセット

Webアプリの場合、<script src= でTone.jsを読み込むようにすると、javascript内で"Tone"というオブジェクトが使えるようになります。

このToneオブジェクトを使っていろいろな設定を行います。

例えば、audioディレクトリに入っているclave.wavというサンプリング音源を鳴らすときには、以下のようにします。

ボタンを押すとwavデータが鳴ります。

 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/0.12.63/Tone.js"></script>
</head>

<body>

  <button onClick="play()">play</button>

  <script>
    const SOUND_FILE_DIR = 'audio/';
    const clave_sound = new Tone.Sampler({ C4: SOUND_FILE_DIR + 'clave.wav' }).toMaster();

    function play() {
      const time = Tone.now();
      clave_sound.triggerAttackRelease("C4", "8n", time);
    }
  </script>
</body>
</html>

このプログラムは直接htmlを開いても動作しません。

ファイル読み込みを使っているのでブラウザのセキュリティ制限に引っかかってしまいます。

Macの人は例えば、ターミナルでhtmlのあるディレクトリに移動して以下のコマンドで簡易Webサーバーを動かします。

 command
python -m SimpleHTTPServer 8000
もしくは
python3 -m http.server 8000

 

ブラウザからは

 url
http://localhost:8000/

にアクセスすれば動きます。

 

音の再生はユーザーの操作が必要

ブラウザにはもうひとつ制限があって、音を出すときにはユーザーの操作が必要です。

昔はページをロードすると同時に音楽が勝手に鳴りまくるページとかあったと思いますが、さいきんの　ブラウザではユーザーが何かをクリックするなどしないと鳴らせないようになっています。

このアプリケーションもhtml側で"play()"という関数を呼ぶボタンを作っておき、javascript側で音を鳴らすplay()関数を用意しています。

 html
<button onClick="play()">play</button>

 

 javascript
function play() {
const time = Tone.now();
clave_sound.triggerAttackRelease("C4", "8n", time);
}

 

でもWebを見ていると動画をいきなり再生できたりするので、正確な制限はよく分かりませんが。

 

Tone.jsでは発声時間を指定する

 

音を鳴らす際には、音源オブジェクトの triggerAttackRelease() というメソッドを呼び出します。

 javascript
clave_sound.triggerAttackRelease("C4", "8n", time);

 

triggerAttackReleaseは翻訳すれば、鍵盤を叩いて話すといった感じでしょうか。

引数は、(音程、音符の長さ、発声時間）です。

new Tone.Samplerでwavデータから音源オブジェクトを生成するときにも音程を指定しました。これは、渡したwavデータがどの音程なのかをTone.jsに教えるためです。

triggerAttackRelease()でも同じ音程を指定すればwavデータと同じ音が鳴ります。別の音程を指定すればwavデータを元に音を上げ下げして鳴らしてくれます。

これにより例えばコップを叩いた音がひとつあればそれを音源にして曲を演奏できたりします。

基準はあくまでサンプリング音源ですから、C4と指定すれば絶対音程でC4の音が鳴るわけではありません。

"8n"は八分音符です。正確な長さにしたければTone.jsにBPMを設定しますが、ここでは設定していません。

最後に発声時間のパラメーターがあるところがTone.jsの特徴です。triggerAttackRelease() では、プログラムの流れとは独立したTone.jsのタイムラインに発声指示をセットします。

こうすることで、正確なタイミングでの発声が可能になります。

 

今回はすぐに鳴らしたいので以下のようにTone.now()というメソッドでTone.jsの現在時間を取得して発声時間としています。私もよく分かっていませんが、こうするととりあえずすぐに鳴ります。

 javascript
const time = Tone.now();

 

ちなみに time+1 とかにするとちょっと遅れて音がなります。

また、 time=0 にするとエラーになります。コンソールのエラーメッセージには、"過去の時間を指定されても鳴らせない"的なことが書いてありました。

 

 

一定間隔毎に関数を呼び出す Tone.Transport.scheduleRepeat

Tone.jsでは、一定間隔毎に任意の関数を呼び出す機能があります。

以下のように設定することで、BPM120で16分音符が来る度にplay_metronome()という関数が呼び出されます。

 javascript
Tone.Transport.bpm.value = 120;
Tone.Transport.scheduleRepeat(play_metronome, '16n');

 

play_metronome()に、音を出したり画面を書き換える処理を書くことで正確なタイミングで演奏やアニメーションが可能になります。

Javascriptの setInterval() と違ってBMPと音符という音楽的な指定ができるので音楽プログラミングで使いやすくなっています。

また、Tone.Transport.scheduleRepeatをセットしただけではまだ動きません。

Tone.Transport.start();　を呼び出すことで時間が動き出し、一定時間毎に関数も呼び出されるようになります。

止めるときは　Tone.Transport.stop();　です。

 

拍子パターンは配列で用意

拍子のパターンは配列で容易しておき、これを play_metronome() 内で読み取って、1なら発声、0ならスルーしています。

 javascript
const metronome = [1, 0, 0, 0];
const rumba_clave = [1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0];

パターンの長さは決まっていないので、基本的にはどんな長さのパターンでも作れます。

プログラミングのできる方は、変更して好きなリズムパターンに変えていただければと思います。

あと、スマホやタブレットでバタドラムを叩いた気になれるアプリも作りました。

コロナでスタジオ入れないからバタドラムをスマホで遊べるようにした

太鼓とか音の大きな楽器は家で叩けないですよね。コロナでスタジオで集まれないしなー、ということでスマホで太鼓が叩けるようにしました。キューバのバタドラムをシミュレートしています

続きを見る

 

-Javascript, プログラミング, 楽器