トップ > プログラム > JavaScript > MML Player

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

はじめに

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

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

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

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

リンク

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

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

主体性の無いページ

奏でてぎばさちゃん!

verse-engine-memo



対応しているMML命令

背景が緑色の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などから一言声をかけてくれると嬉しいです。

単純に再生したい場合

詳細設定などをせずに単純にMMLを再生したい場合は、
JavaScript
new MMLPlayer().play("cdefg2");
というように書けば1行で鳴らせます。

停止処理や、独自の波形を再生したい場合

インスタンス生成
JavaScript
let mml = new MMLPlayer();
再生・停止
JavaScript
mml.play("cdefg2"); // 再生 mml.stop(); // 停止
独自の波形データで演奏したい場合(periodicWaveから)
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

「#」「&」命令を追加しました。

最終更新日:2024/6/18

Top