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をご覧下さい。
- 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 の場合:yarn の場合:npm i -D flmml-on-html5yarn 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 });
...- Node.js, yarn 導入済の環境で
git clone後リポジトリのルートディレクトリに移動し
yarn install
yarn start
FlMML作者のおー氏をはじめとしたFlMMLのコミッターの皆様、ならびに FlMML on HTML5 の不具合を報告頂いたユーザーの皆様、そのほか FlMML / FlMML on HTML5 の発展に関わるすべての方々に感謝します。
MP3 ファイル出力に lamejs を利用しています (外部のスクリプトとして読み込むためソースコードは同梱していません) 。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent