A lightweight, dependency-free JavaScript library to play music from the
.mimitext-based format.
Mimi Playerは、シンプルで人間が読み書きできる音楽フォーマット .mimi のための再生ライブラリです。Web Audio APIを使用して、テキストで書かれた楽譜をリアルタイムで音声に合成します。
.mimi format?.mimi (Music instrument minimal interface) は、1行が1つの音符に対応する、非常にシンプルなテキストベースの音楽フォーマットです。
.mimi, で区切られたパラメータで1つの音符を定義します。# で始まる行はコメントとして無視されます。Startパラメータがすべてを決定します。| # | Parameter | Format | Description | Default |
|---|---|---|---|---|
| 1 | Type | Hex 00-04 |
音の種類 (Waveform) 00: Sine, 01: Triangle, 02: Square, 03: Sawtooth, 04: Noise |
- |
| 2 | Pitch | Hex 00-FF |
音の高さ (MIDI Note Number) 例: 3C = C4 (中央のド) |
- |
| 3 | Length | Hex 0000-FFFF |
音の長さ (フレーム数) 1フレーム = 1/24秒 (デフォルト) |
- |
| 4 | Start | Hex 00..-FF.. |
開始地点 (フレーム数) 曲の先頭からのフレーム数 |
- |
| 5 | Volume | Hex 00-FF |
音量 (省略可) 00: 無音, FF: 最大 |
FF |
| 6 | Pan | Hex 00-FF |
パンニング (省略可) 00: 左, 80: 中央, FF: 右 |
80 |
| * | Extra | Any | 7列目以降のデータは無視されます。 | - |
ファイル冒頭に、曲の情報をコメントとして記載することを推奨します。
# Mimi Music Format v1.0
# Title: My Awesome Song
# Tempo: 120BPM (1beat = 12frames / 1bar = 48frames)
# Type, Pitch, Length, Start, Volume, Pan
最も簡単で推奨される方法です。以下の<script>タグ群をHTMLに追加するだけで、Mimi Playerが利用可能になります。
mimi.hex.min.jsについては、Mimi_hexを使わない限り任意です。
<script src="https://cdn.jsdelivr.net/gh/AruihaYoru/mimi@main/mimi.hex.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AruihaYoru/mimi@main/mimi.v2.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AruihaYoru/mimi@main/mimi.v1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AruihaYoru/mimi@main/mimi.min.js"></script>
このリポジトリから mimi.js または mimi.min.js をダウンロードし、プロジェクトに配置します。
# Clone the repository
git clone https://github.com/AruihaYoru/mimi.git
そして、あなたのHTMLファイルからスクリプトを読み込みます。
<script src="path/to/mimi.hex.min.js"></script>
<script src="path/to/mimi.v1.min.js"></script>
<script src="path/to/mimi.v2.min.js"></script>
<script src="path/to/mimi.min.js"></script>
MimiPlayer のインスタンスを作成します。.mimi 形式のテキストデータを player.load() で読み込みます。player.play() で再生します。<!DOCTYPE html>
<html>
<head>
<title>Mimi Player Demo</title>
</head>
<body>
<textarea id="mimi-code" rows="10" cols="60">
# Type, Pitch, Length, Start, Volume, Pan
00, 3C, 000C, 0000, FF # C4 for 0.5s at 0s
01, 40, 000C, 000C, FF # E4 for 0.5s at 0.5s
02, 43, 0018, 0018, 80 # G4 for 1.0s at 1.0s, half volume
</textarea>
<br>
<button id="play-btn">Play</button>
<button id="stop-btn">Stop</button>
<!-- Load Mimi Player from CDN -->
<script src="https://cdn.jsdelivr.net/gh/AruihaYoru/mimi@main/mimi.min.js"></script>
<script>
const player = new MimiPlayer();
const mimiCodeEl = document.getElementById('mimi-code');
document.getElementById('play-btn').addEventListener('click', () => {
// AudioContext may require user interaction to start
player.audioCtx.resume().then(() => {
player.load(mimiCodeEl.value);
player.play();
});
});
document.getElementById('stop-btn').addEventListener('click', () => {
player.stop();
});
</script>
</body>
</html>
new MimiPlayer(fps)MimiPlayerの新しいインスタンスを作成します。
fps (Number, Optional, Default: 24): 1秒あたりのフレーム数。タイミング計算の基準となります。.load(text): .mimi形式の文字列をパースしてプレイヤーに読み込みます。
text (String): .mimi形式のデータ。.play(startFrame): 読み込まれた音楽の再生を開始します。
startFrame (Number, Optional, Default: 0): 再生を開始するフレーム位置。.stop(): 再生を即座に停止します。.getCurrentFrame(): 現在の再生フレーム位置を返します。.isPlaying (Boolean): 現在再生中かどうかを示す読み取り専用のプロパティ。.onPlay: play()が呼ばれ、再生が開始されたときに実行されるコールバック関数をセットします。.onStop: stop()が呼ばれ、再生が停止したときに実行されるコールバック関数をセットします。.onEnd: 曲が最後まで再生され、自然に停止したときに実行されるコールバック関数をセットします。Example:
player.onPlay = () => console.log('Playback started!');
player.onStop = () => console.log('Playback stopped.');
player.onEnd = () => console.log('The song has finished.');
.mimi music files. Try it out!This project is licensed under the MIT License. See the LICENSE file for details.# mimi