FlMML on HTML5
The transplant of FlMML, MML player which runs on Flash Player, to HTML5.
Flash上でMMLを演奏するFlMMLをHTML5環境上に移植したものです。
Web Audio, Web Workerを利用しているため現状動作ブラウザは限られますが、Flash版と比べ概ね軽快に動作します。
ニコニコ大百科で使われているものに近い、SVGを使用したプレイヤーUIも付属しています。
デモはこちら
Demo page
Webページに貼り付ける
ここではMMLが記述されたファイルをmml.txtとして話を進めます。
HTMLファイルと同じディレクトリに
flmmlonhtml5.js
flmmlworker.js
flmmlplayer.js
mml.txt
のように、3つのスクリプトとMMLが記述されたファイル(拡張子は何でも可)を置きます。
HTMLファイルの<head>タグ内に
...
<head>
...
<script type="text/javascript" src="flmmlonhtml5.js"></script>
<script type="text/javascript" src="flmmlplayer.js"></script>
...
</head>
...の__2行__(flmmlworker.jsは読み込まない)を加え、プレイヤーを配置したいところに以下のように記述します。
...
<body>
...
<script type="text/javascript">
new FlMMLPlayer({ mmlURL: "mml.txt" });
</script>
...
</body>
...これでプレイヤーが貼り付けられます。
プレイヤーは1つのページに何個でも貼り付けることができます。
そのほか、オプションを指定することでプレイヤーの大きさや色合いを変えたりできます。
対応ブラウザ
- 動作確認済み
- Chrome
- Chrome for Android
- FireFox
- Opera
- Safari
- iOS Safari
- Microsoft Edge
- 非対応確認済み
- Internet Explorer
- Android Browser
- Opera Mini
For Developers
シーケンサ本体, プレイヤーUIの詳細な仕様はwikiをご覧になって下さい。
プロジェクト形式はVisual Studio for WebのTypeScriptを使用したWeb アプリケーションです。
.tsファイルをコンパイルして全て結合したのがflmmlworker-raw.jsになります。
flmmlonhtml5-raw.js, flmmlplayer-raw.jsはそれらとは別に記述したJavaScriptファイルです。
これら3つのファイルをそれぞれUglifyJSで圧縮したのがflmmlworker.js, flmmlonhtml5.js, flmmlplayer.jsです。
圧縮用のバッチファイルcompress.batを同梱しています。
謝辞
FlMML作者のおー氏と、CodeRepos/CodePlexにコミットし新機能追加や不具合修正をされてきた方々など、FlMMLの発展に関わってきたすべての方々に感謝します。