forked from cifkao/html-midi-player
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
47 lines (40 loc) · 1.9 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML MIDI Player</title>
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/@magenta/[email protected]/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-visualizer type="staff" class="visualizer" id="staffVisualizer2" lines="3"></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>