FlMML on HTML5

The porting of FlMML, MML player which runs on Flash Player, to HTML5.

Flash上でMMLを演奏するFlMMLをHTML5環境上に移植したものです。

v2.0.0 からオーディオファイル出力にも対応しました。

デモはこちら
Demo page

※v1.x 系で付属していたプレイヤーUIは v2.0.0 で削除されました

対応ブラウザ

Chrome
Chrome for Android
FireFox
FireFox for Android
Microsoft Edge
Opera
Opera Mobile
Safari (14.1 以降)
Safari on iOS (iOS 14.5 以降)
Android Browser (Android 5.x 以降)

使い方

シーケンサの詳細な仕様はwikiをご覧下さい。

js ファイルを直接読み込む

Releases から flmml-on-html5.js , flmml-on-html5.worker.js のそれぞれをダウンロード
flmml-on-html5.js のみ <script> タグで読み込む
再生開始の契機となるイベント発火の前にクリックされるボタン/プレイヤー等 DOM 要素の CSS セレクタを FlMML.prepare(playerSelector) の引数に指定し実行する
※実行しなくとも問題ない場合もありますが実行することを推奨します。詳細は wiki を参照
new FlMML() の引数に flmml-on-html5.worker.js のパスを指定
※ flmml-on-html5.worker.js をサイトと異なるドメインに配置した場合は crossOriginWorker オプションを有効にして下さい。詳細は wiki を参照

例:
ディレクトリ構成

somedir
├js
│├flmml-on-html5.js
│└flmml-on-html5.worker.js
└index.html

index.html

...
<script src="./js/flmml-on-html5.js"></script>
<script>
    FlMML.prepare("#play");
    const flmml = new FlMML({ workerURL: "./js/flmml-on-html5.worker.js" });
    function onClick() {
        flmml.play("L8 O5CDEFGAB<C");
    }
</script>
...
<button id="play" onclick="onClick()">Play</button>
...

npm パッケージをインストール

インストール
npm の場合:

npm i -D flmml-on-html5

yarn の場合:

yarn add -D flmml-on-html5

インストール後 ./node_modules/flmml-on-html5/dist/flmml-on-html5.worker.js をお好みの場所にコピー
再生開始の契機となるイベント発火の前にクリックされるボタン/プレイヤー等 DOM 要素の CSS セレクタを FlMML.prepare(playerSelector) の引数に指定し実行する
new FlMML() の引数にコピーした flmml-on-html5.worker.js のパスを指定

例:

import { FlMML } from "flmml-on-html5";
...
FlMML.prepare(somePlayerSelectors);
const flmml = new FlMML({ workerURL: someWorkerURL });
...

For Developers

開発環境構築

Node.js, yarn 導入済の環境で
git clone 後リポジトリのルートディレクトリに移動し

yarn install
yarn start

謝辞

FlMML作者のおー氏をはじめとしたFlMMLのコミッターの皆様、ならびに FlMML on HTML5 の不具合を報告頂いたユーザーの皆様、そのほか FlMML / FlMML on HTML5 の発展に関わるすべての方々に感謝します。

MP3 ファイル出力に lamejs を利用しています (外部のスクリプトとして読み込むためソースコードは同梱していません) 。

pycabbage/flmml-on-html5