html-midi-player
Version:
MIDI file player and visualizer web components
47 lines (39 loc) • 1.84 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>HTML MIDI Player</title>
<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.22.0/es6/core.js,npm/focus-visible@5"></script>
<script src="./dist/midi-player.min.js"></script>
<style>
#player2::part(control-panel) {
background: #ff5;
border: 2px solid #000;
border-radius: 10px;
}
</style>
</head>
<body>
<h1><a href="https://github.com/cifkao/html-midi-player">HTML MIDI Player</a></h1>
<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid" sound-font loop visualizer=".visualizer" id="player1"></midi-player>
<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid" visualizer=".visualizer" id="player2"></midi-player>
<midi-visualizer type="piano-roll" class="visualizer" id="pianoRollVisualizer"></midi-visualizer>
<midi-visualizer type="waterfall" class="visualizer" id="waterfallVisualizer"></midi-visualizer>
<midi-visualizer type="staff" class="visualizer" id="staffVisualizer"></midi-visualizer>
<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/notfound.mid" sound-font></midi-player>
<midi-player sound-font></midi-player>
<script>
window.addEventListener('DOMContentLoaded', function() {
for (const player of document.querySelectorAll('midi-player')) {
for (const event of ['load', 'start', 'stop', 'loop']) {
player.addEventListener(event, console.log);
}
}
const waterfallVisualizer = document.querySelector('#waterfallVisualizer');
waterfallVisualizer.config = {
showOnlyOctavesUsed: true
};
});
</script>
</body>
</html>