Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>MIDI Player</title> | |
| </head> | |
| <body> | |
| <h3>MIDIファイルをブラウザで再生</h3> | |
| <input type="file" id="midi-upload" accept=".mid"/> | |
| <br/><br/> | |
| <button onclick="playMIDI()">▶️ 再生</button> | |
| <button onclick="stopMIDI()">⏹ 停止</button> | |
| <p id="status"></p> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/MIDI.min.js"></script> | |
| <script> | |
| let isLoaded = false; | |
| MIDI.loadPlugin({ | |
| soundfontUrl: "https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/", | |
| instrument: "acoustic_grand_piano", | |
| onsuccess: function() { | |
| isLoaded = true; | |
| document.getElementById("status").innerText = "✅ サウンドフォント読み込み完了"; | |
| } | |
| }); | |
| function playMIDI() { | |
| if (!isLoaded) { | |
| alert("サウンドフォント読み込み中です。少し待ってから再度お試しください。"); | |
| return; | |
| } | |
| const fileInput = document.getElementById("midi-upload"); | |
| const file = fileInput.files[0]; | |
| if (!file) { | |
| alert("MIDIファイルを選択してください。"); | |
| return; | |
| } | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const base64data = e.target.result.split(',')[1]; | |
| MIDI.Player.loadFile("data:audio/midi;base64," + base64data, () => { | |
| MIDI.Player.start(); | |
| document.getElementById("status").innerText = "🎵 再生中..."; | |
| }); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| function stopMIDI() { | |
| MIDI.Player.stop(); | |
| document.getElementById("status").innerText = "⏹ 停止しました"; | |
| } | |
| </script> | |
| </body> | |
| </html> | |