ブラウザでMMLを演奏できる!「MMLPlayer」
はじめに
JavaScriptでMMLを演奏できるJavaScriptライブラリを作成しました!
制作過程などについては、以下のブログ記事を参照してください!
リンク
以下のサイトで、「MML Player」を使っていただけました!
良ければこちらもどうぞ!
対応しているMML命令
背景が緑色のMMLをクリック(タップ)すると、サンプル音声を再生します。音符に関する命令
- cdefgab
- r
- 休符
- 長さの指定は、cdefgabと同じです。
- [ ]
- 和音
- "v40 [ceg]"と記述すると、「ドミソ」の和音が演奏できます。
- 長さの指定は、cdefgabと同じく"v40 [ceg]2"などと表現します。
- >
- これ以降の音階を1オクターブ上げる
- "gab>c"で、「ソラシド」が演奏できます。
- 2オクターブ以上上げたい場合は、「>>」または「>2」と記述します。
- <
- これ以降の音階を1オクターブ下げる
- "c<bag"で、「ドシラソ」が演奏できます。
- 2オクターブ以上下げたい場合は、「<<」または「<2」と記述します。
- + または #
- -
- 半音下げる
- "d-"でレ♭(ド#)になります
- o
- オクターブ指定
- "o5"で、以降の音階を5オクターブ目に設定します。
- デフォルトは4です。
- $
- 無限ループ
- "$cde"で、「ドレミドレミドレミ...」と演奏します。
- /: :/
- |
- ^
- タイ
- "c4^4"で、(4分音符+4分音符の)2分音符の「ド」になります。
- &
- 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"で、これ以降の全てのキーを一つ上げます。
- @
- ;
- 次のトラック
- 複数のパートがある音声を再生できます。
- [パート1のMML] ; [パート2のMML] というように書きます。
プログラムへの実装等
ライブラリの最新版ダウンロードや、詳細な仕様については、mml-player - GitHubにまとめてあります。
サイトなどでこのライブラリを使用したい場合は、私のTwitterなどから一言声をかけてくれると嬉しいです。
単純に再生したい場合
詳細設定などをせずに単純にMMLを再生したい場合は、というように書けば1行で鳴らせます。JavaScriptnew MMLPlayer().play("cdefg2");
停止処理や、独自の波形を再生したい場合
インスタンス生成再生・停止JavaScriptlet mml = new MMLPlayer();
独自の波形データで演奏したい場合(periodicWaveから)JavaScriptmml.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 :/ ;
今後実装したいこと
たくさんの音色への対応
エンベロープ関係
ビブラート
クレッシェンド・デクレッシェンド(音量操作)
更新履歴
2024/06/11
開発環境を変え、大幅な仕様変更
- p(パン)の位置指定が1(左),2(右),3(中央)から、1(左)~128(中央)~255(右)と細かく指定できるように
- &(スラー)で、音程だけでなく、パンの位置にも対応
今後の更新については、GitHub上のコミットメッセージで...
2022/05/10
「//」でコメントを記述できるように変更
q100の時に、雑音が発生してしまう問題を修正
音声が実際の1/4になってしまう問題を修正(既存の譜面よりも4倍大きな音になるので注意)
2022/05/09
ライブラリを使ってくれているサイトを紹介するスペースを作成。
視聴リンクからのアクセスで、正常に視聴できない問題を修正。
一部のMML命令の説明を修正
2022/01/21
パン命令「p」を追加
2021/12/19
キー変更(転調)命令「k」を追加
編集したMMLデータを自動で保存できるようにしました。(保存のタイミングは、再生ボタンを押したときです。)
2021/12/08
1音だけに対してオクターブ操作ができる「`」「"」命令を追加しました。
ver20211207で追加した音色生成によって、再生されるまでに時間がかかっていたので、修正しました。
MML命令の説明欄に記述したサンプルをクリックで再生できるようにしました。
2021/12/07
音色「25%パルス波」、「12.5%パルス波」を追加しました
ユーザ定義波形を再生できるようにしました。
2021/11/24
「@」命令を追加しました
2021/03/19
"&"(スラー)の直後に音階がなかった場合に再生されない問題を修正しました。(例:c&>c)
音の長さ0(主にスラーと併用)に対応しました。(例:c&e0)
連続のスラーに対応させました。(例:c&d&c)
2021/03/18
"&"(スラー)を使ったときに、タイミングがズレてしまう問題を修正しました
MML中に非対応の命令があった場合、コンソールに警告を出力しますが、その命令をスキップして再生できるように変更しました。
2021/03/16
MMLPlayer.stop();で、音声をすぐに停止できるようにしました。
(mml-emitterにもともとついていた機能。ファイルサイズが約2倍になったため、停止機能が必要ない場合は、20210315の方をお勧めします。)
2021/03/15
「#」「&」命令を追加しました。