ブラウザでMMLを演奏できる！「MMLPlayer」

はじめに

JavaScriptでMMLを演奏できるJavaScriptライブラリを作成しました！

制作過程などについては、以下のブログ記事を参照してください！

ブラウザ上でMMLを再生できる「MML Player」を作ってみた！

目次
MML命令一覧＆説明
ライブラリの使い方

リンク

以下のサイトで、「MML Player」を使っていただけました！

良ければこちらもどうぞ！

主体性の無いページ

奏でてぎばさちゃん！

verse-engine-memo

対応しているMML命令

• cdefgab
  • ドレミファソラシ
  • "c8"と記述すると、8分音符の「ド」が演奏できます。
  • "d2."と記述すると、符点2分音符の「レ」が演奏できます。
• r
  • 休符
  • 長さの指定は、cdefgabと同じです。
• [ ]
  • 和音
  • "v40 [ceg]"と記述すると、「ドミソ」の和音が演奏できます。
  • 長さの指定は、cdefgabと同じく"v40 [ceg]2"などと表現します。
  ※同時に複数の音を鳴らす場合、適切にボリューム設定(v40等)をしないと音割れします。
• >
  • これ以降の音階を1オクターブ上げる
  • "gab>c"で、「ソラシド」が演奏できます。
  • 2オクターブ以上上げたい場合は、「>>」または「>2」と記述します。
• <
  • これ以降の音階を1オクターブ下げる
  • "c<bag"で、「ドシラソ」が演奏できます。
  • 2オクターブ以上下げたい場合は、「<<」または「<2」と記述します。
• + または #
  • 半音上げる
  • "c+"または"c#"でド＃(レ♭)になります
• -
  • 半音下げる
  • "d-"でレ♭(ド＃)になります
• o
  • オクターブ指定
  • "o5"で、以降の音階を5オクターブ目に設定します。
  • デフォルトは4です。
• $
  • 無限ループ
  • "$cde"で、「ドレミドレミドレミ...」と演奏します。
• /: :/
  • 繰り返し
  • "/:cd:/e"で、「ドレドレミ」と演奏します。
  • 繰り返し回数を指定したい場合は"/:cd:/3e"で、「ドレドレドレミ」のようになります。
• |
  • ループを抜ける
  • "/:c|d:/e"で、「ドレドミ」と演奏します。
  • "/:c|d:/3e"で、「ドレドレドミ」と演奏します。
• ^
  • タイ
  • "c4^4"で、(4分音符+4分音符の)2分音符の「ド」になります。
• &
  • スラー
  • "c&d"で、「ド」から「レ」に滑らかに音程が変わります。
  • "c&d0"2つ目の音の長さを0にすることもできます。
• p
  • パン
  • 音を左右から鳴らすことができます。
  • p1c 左から
  • p255c 右から
  • p128c 中央から(デフォルト)
  • スラーと組み合わせてp1c2& p255cこんなことも！？

• l
  • デフォルトの音の長さを設定
  • cdefgabrで、音の長さを指定しなかった場合に、"l8"で自動的に8分音符になります
  • デフォルトは4です。
• q
  • 発音の長さを設定
  • "q100"で、音符と音符の間の間隔がなくなり、つなげて演奏されているように聞こえます。
  • 0-100で指定し、デフォルトは75です。
• v
  • ボリュームの設定
  • "v50"で、音量を50にします。
  • 0-127で指定し、デフォルトは100です。
• t
  • テンポ設定
  • "t60"で、テンポを60に設定します。
  • デフォルトは120です。
• k
  • キー(転調)設定
  • "k+1"で、これ以降の全てのキーを一つ上げます。
• @
  • 音色選択
  • @0 サイン波
  • @1 矩形波
  • @2 のこぎり波
  • @3 三角波
  • @4 25%パルス波
  • @5 12.5%パルス波
  • デフォルトは@0です。

• ;
  • 次のトラック
  • 複数のパートがある音声を再生できます。
  • [パート1のMML] ; [パート2のMML]　というように書きます。
  ※同時に複数の音を鳴らす場合、適切にボリューム設定(v)をしないと音割れします。

プログラムへの実装等

ライブラリの最新版ダウンロードや、詳細な仕様については、mml-player - GitHubにまとめてあります。

サイトなどでこのライブラリを使用したい場合は、私のTwitterなどから一言声をかけてくれると嬉しいです。

JavaScript

new MMLPlayer().play("cdefg2");
			

JavaScript

let mml = new MMLPlayer();
			

JavaScript

mml.play("cdefg2"); //  再生
mml.stop(); //  停止
			

JavaScript

//  第1引数は、音色番号(mml命令「@」の後に続く数字)
//  第2引数は、createPeriodicWaveなどで作成したperiodicWaveオブジェクト
mml.setInst(10, periodicWave);
			

JavaScript

//  サイン波のサンプル
const wave = new Float32Array(2048);
for(let i = 0; i < buffer.length; i++){
    buffer[i] = Math.sin(Math.PI * 2 * i / buffer.length);
}
//  第1引数は、音色番号(mml命令「@」の後に続く数字)
//  第2引数は、1周期の波形データ
mml.setInst(10, buffer);
			

サンプルMMLについて

mml-emitterのサンプルページ2曲目のものです。

MML

// Turkish March
// W.A.Mozart
t120 q50 v100
/: o4 l16 bag+a>
   c8r8dc<b>c e8r8fed+e bag+abag+a >c4<a8>c8<
   l8 [gb][f+a][eg][f+a] [gb][f+a][eg][f+a] [gb][f+a][eg][d+f+] e4 :/
/: o5 [ce][df] [eg][eg]a16g16f16e16 [<b>d]4[ce][df] [eg][eg]a16g16f16e16 [<b>d]4[<a>c][<b>d]
   [ce][ce] f16e16d16c16 <[g+b]4[a>c][b>d] >[ce][ce]f16e16d16c16 <[g+b]4
   l16 bag+a >c8r8dc<b>c e8r8fed+e bag+abag+a l8>c4<ab >c<bag+ aefd c4<b8.a32b32 a4 :/
;
t120 q50 v80
/: o3 l8 r4
   a>[ce][ce][ce]< a>[ce][ce][ce]< a>[ce]<a>[ce]< a>[ce][ce][ce]<
   e[b>e][b>e][b>e] e[b>e][b>e][b>e] e[b>e]<b>b e4 :/
/: o3 r4 c>c<e>e<g>g<r4 c>c<e>e<g4r4 <a>ac>c<e>e<r4 <a>ac>c<e4r4
   a>[ce][ce][ce]< a>[ce][ce][ce]< a>[ce]<a>[ce]< f[a>d+][a>d+][a>d+]
   e[ae]d[fb] c[ea]d[fb] [ea][ea][eg+][eg+] [<a>a]4 :/
;
		

今後実装したいこと

たくさんの音色への対応

エンベロープ関係

ビブラート

クレッシェンド・デクレッシェンド（音量操作）

更新履歴