🎵MIDI プレーヤーデモ

再生してみてください

このプレーヤーについて

このデモは、ブラウザでMIDI音楽ファイルを再生できるプレーヤーです。以下の3つの技術が協働して動作しています：

Tone.js - ブラウザで音を生成・再生
Magenta.js - MIDIデータを解析・処理
html-midi-player - 使いやすいUIコンポーネント

✨ 特徴

HTMLタグ1つで実装
CSS でデザインを完全カスタマイズ可能
再生・一時停止・シークバー機能
自動ループ再生対応

📖実装ガイド

最小限のコード

MIDIプレーヤーを実装するには、以下の3ステップです：

ステップ1: ライブラリを読み込む

<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/html-midi-player@1.5.0"></script>

このスクリプトタグをHTMLの <head> または <body> 内に記述します。

ステップ2: MIDIプレーヤータグを配置

<midi-player
  src="music.mid"
  sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus">
</midi-player>

ステップ3: CSSでデザイン（オプション）

プレーヤーの見た目をカスタマイズする場合のみ必要です。デフォルトのまま使うこともできます。

ファイルの準備

MIDIファイル: 拡張子 .mid の音楽ファイルを用意
ファイル配置: HTMLファイルと同じフォルダか、サブフォルダに配置
URL指定: 別のサーバーのファイルを使う場合は、CORSに対応したサーバーが必須

実装例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My MIDI Player</title>
  <script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/html-midi-player@1.5.0"></script>
</head>
<body>
  <h1>My Music Player</h1>
  <midi-player
    src="my_song.mid"
    sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus"
  ></midi-player>
</body>
</html>

💡 Tips: このコードをコピーして、自分のMIDIファイル名に変更するだけで動作します。

⚙️技術仕様詳細

ライブラリの役割

📍 html-midi-player v1.5.0

GitHub: https://github.com/cifkao/html-midi-player

Web Components ベースのカスタムHTML要素 <midi-player> を提供します。

再生・一時停止ボタン
シークバー（再生位置移動）
時刻表示
CSS カスタマイズ対応
ループ再生機能

🎹 Tone.js

Web Audio APIをラップした高級ライブラリ。実際の音声生成を担当します。

🎵 Magenta.js

GoogleのAI/ML音楽ライブラリ。MIDIデータの解析とシンセサイザー制御を行います。

動作フロー

1

HTML要素解析 - ブラウザが <midi-player> タグを認識

↓

2

ファイル取得 - src属性のMIDIファイルをダウンロード

↓

3

MIDI解析 - Magenta.js がノート情報を抽出

↓

4

音声合成 - Tone.js が音波を生成

↓

5

再生出力 - Web Audio API 経由でスピーカーから出力

<midi-player> 属性

📁 src="ファイル名.mid" [必須]

再生するMIDIファイルを指定します。

src="music.mid" - 同じフォルダ
src="songs/music.mid" - サブフォルダ
src="https://example.com/music.mid" - URL指定

🎨 sound-font="URL" [必須]

楽器音色データ（SoundFont）の場所を指定。これが無いと音が出ません。

推奨フォント:

https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus - 高品質（推奨）
https://storage.googleapis.com/magentadata/js/soundfonts/jazz_kit - ジャズ風
https://storage.googleapis.com/magentadata/js/soundfonts/conductor - ソロ用

🔄 loop [オプション]

曲の終了後、自動的に最初から繰り返す。属性値は不要。

<midi-player src="..." loop></midi-player>

📥 showDownloadButton [オプション]

MIDIファイルのダウンロードボタンを表示。

📊 showVisualizer [オプション]

周波数スペクトラムのビジュアライザーを表示。

🎨CSS カスタマイズ

Web Components の ::part() 疑似要素を使用して、プレーヤーの各パーツをカスタマイズできます。

カスタマイズ可能なパーツ一覧

::part(control-panel)

全体のコントロール領域。背景色、パディング、ギャップなどを調整。

midi-player::part(control-panel) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
  padding: 15px;
}

::part(play-button)

再生・一時停止ボタン。

midi-player::part(play-button) {
  background: white;
  color: #667eea;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

::part(seek-bar)

再生位置を示す進捗バー。

midi-player::part(seek-bar) {
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

::part(current-time), ::part(total-time)

現在時刻と総時間の表示。

midi-player::part(current-time) {
  color: white;
  font-size: 13px;
}

カスタマイズ例

<!-- HTML -->
<midi-player
  src="music.mid"
  sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus">
</midi-player>

<!-- CSS -->
<style>
  midi-player::part(control-panel) {
    background: #333;
    border-radius: 20px;
    padding: 20px;
  }
  
  midi-player::part(play-button) {
    background: #ff6b6b;
    color: white;
    width: 50px;
    height: 50px;
  }
  
  midi-player::part(seek-bar) {
    background: #666;
    height: 8px;
  }
</style>

💡 活用法

サイトのテーマカラーに合わせてカラーリング
ボタンのサイズを調整してモバイル対応
ダークモード・ライトモードの切り替え
アニメーション効果の追加

🎵MIDI プレーヤー デモ