carborane3 / FlMMLonHTML5 から移転しました | Porting of FlMML to HTML5
Clone or download
Latest commit 2d949c2 Dec 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src v1.2.0 ビルド Nov 10, 2018
.gitignore #19 VSCode向けの構成に変更 Nov 10, 2018
LICENSE 原作者の著作権表記追記 Dec 10, 2018
README.md transplant -> porting Dec 10, 2018
flmmlonhtml5.js v1.2.0 ビルド Nov 10, 2018
flmmlplayer.js v1.2.0 ビルド Nov 10, 2018
flmmlworker.js v1.2.0 ビルド Nov 10, 2018
index.html index.htmlの空要素タグの閉じ方修正 Nov 10, 2018
screenshot.gif #16 対応 Nov 10, 2018

README.md

FlMML on HTML5

Join the chat at https://gitter.im/argentum384/flmml-on-html5
The porting of FlMML, MML player which runs on Flash Player, to HTML5.


Flash上でMMLを演奏するFlMMLをHTML5環境上に移植したものです。
SVGを使用したプレイヤーUIも付属しています。
screenshot.gif

デモはこちら
Demo page

対応ブラウザ

  • 動作確認済み
    • Chrome
    • Chrome for Android
    • FireFox
    • Opera
    • Safari
    • iOS Safari
    • Microsoft Edge
    • Android Browser (Android 5.x 以降)
  • 非対応確認済み
    • Internet Explorer
    • Android Browser (Android 4.x 以前)
    • Opera Mini

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つのページに何個でも貼り付けることができます。
そのほか、オプションを指定することでプレイヤーの大きさや色合いを変えたりできます。

For Developers

シーケンサ本体, プレイヤーUIの詳細な仕様はwikiをご覧下さい。

開発環境構築

Windows 10で構築していますがMac, Linuxでも同じ手順で構築できると思われます(未確認)。

以下2つのコンポーネント

をインストールした後、シェルで以下コマンドを実行しtscuglifyjsをインストールします。

npm install -g typescript
npm install -g uglify-js

あとはVisual Studio Codeを起動し/src/ディレクトリを開けば準備完了です。
tasks.json に2つのタスク

  • compile: TypeScriptのコンパイルのみ
  • compileAndMinify: TypeScriptのコンパイル + jsファイル圧縮

を用意しています。

各js / tsファイルの自動生成

ファイル 自動生成 備考
*.ts ×
/src/flmmlonhtml5-raw.js ×
/src/flmmlworker-raw.js TypeScriptコンパイルで生成
/src/flmmlplayer-raw.js ×
/flmmlonhtml5.js /src/flmmlonhtml5-raw.jsをminify
/flmmlworker.js /src/flmmlworker-raw.jsをminify
/flmmlplayer.js /src/flmmlplayer-raw.jsをminify

謝辞

FlMML作者のおー氏をはじめ、FlMMLに新機能追加や不具合修正をされてきたコミッターの皆様や、FlMML on HTML5の不具合を報告頂いた方々といった、FlMML / FlMML on HTML5の発展に関わるすべての方々に感謝します。