Spaces:
Running
Running
File size: 1,707 Bytes
d4b96ca |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html>
<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>
|