ブラウザ上でMMLを再生できる「MML Player」を作ってみた！
作成日： ・ 更新日：
手っ取り早くMMLPlayerの動作確認をしたい方は こちら から！
はじめに
ブラウザ上でちょっとした効果音やBGMなどを再生したかった。
だけど1秒にも満たないような効果音の音声ファイルを用意するのもめんどくさい。
こう思って、ブラウザ上でMMLを再生するライブラリをいろいろ調べてみました！
すると、MMLを再生することのできる JSMML というライブラリをみつけました！
……
だが、これは2020年にサポートが終了したFlushを使ってMMLを再生するというものでした。
Flushのサポートが終了した今、もうこのライブラリは使うことができないなと思い、もうすこし調べてみると…
mml-emitter というライブラリも発見しました！
しかし、私の使用したいMML命令が非対応だったなどの問題がありました。
ですが、いくら探しても私の求める機能を満たすライブラリが見つからなかったので、私の使用したかったコマンドをmml-emitterに組み込むことにしました。
mml-emitter について
これは、Web Audio API という新しい機能を使用するライブラリで、最新のChromeで試したところ、問題なく音声を再生することができました！
mml-emitterは以下の基本的なMML命令に対応していたのですが、私の使用したいMML命令が非対応だったなどの問題がありました。
mml-emitterが対応しているMML命令
| MML命令 | 説明 |
|---|---|
| cdefgab | ドレミファソラシ |
| r | 休符 |
| [ ] | 和音 |
| <> | 1オクターブ変更 |
| + - | 半音変更 |
| ^ | タイ |
| o | オクターブ指定 |
| l | デフォルトの音の長さを設定 |
| q | 発音の長さを設定 |
| v | ボリューム設定 |
| t | テンポ設定 |
| $ | 無限ループ |
| /: :/ | 繰り返し |
| ; | 次のトラック記述 |
改造について
元のライブラリは、たぶん多くのブラウザにも対応させるためにいろいろ工夫をしていると思うのですが、私にはそのコードを理解することができなかったため、class構文で直接書き、これにより必要のなくなった部分は除去しました。
追加で対応させたのは以下の命令です。(2021/3/15現在)
追加したMML命令
| MML命令 | 説明 |
|---|---|
| # | 半音上げる(+と同じ) |
| & | スラー |
今度は逆に、削除した機能です。
サイトで音声を鳴らすことが目標だったため、MMLの中にコメントを記述する機能を削除しました。
ほかにも、Web Audio APIはユーザからのアクションがないと音を鳴らせない仕様になっています。
そのため、ライブラリが読み込まれてから初めてユーザがクリックなどのアクションをしたタイミングでAudioContextを取得することで、これ以降では自由に音を流せるようにしました。
動作確認について
最新バージョンのほとんどのブラウザで問題なく動作することを確認しました。
-
iOS
- Safari
- Chrome
-
Android
- Chrome(89.0.4339.90)
- Firefox(86.1.1)
-
Windows
- Chrome(89.0.4389.90)
- Firefox(86.0.1)
- Edge(89.0.774.54)
ライブラリの使い方
2021/12/7 以下のリンクから、最新版の動作確認用のサンプルや、詳しいライブラリの実装法などを見ることができます。