forked from logue/sf2synth.js
-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
107 lines (76 loc) · 2.72 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hidden {
opacity: 0
}
</style>
</head>
<body>
<fieldset>
<legend>Open SF2 file</legend>
<input type="file">
</fieldset>
<output></output>
<div id="controls" class="hidden">
<br><hr><br>
<fieldset>
<legend>Bank</legend>
<select name="bank" id="banks"></select>
</fieldset>
<fieldset>
<legend>Program</legend>
<select name="program" id="programs"></select>
</fieldset>
<br><hr><br>
<div id="keys">
</div>
</div>
<script type="module">
import SoundFont from './pkg/index.js';
const statusOutput = document.querySelector('output');
const fileInput = document.querySelector('input');
const sf = new SoundFont();
const stringToElements = str => document.createRange().createContextualFragment(str);
const buttons = stringToElements([...new Array(60)].map((_, i) => i + 30).map(midiNum => `<button>${midiNum}</button>`).join(''));
window.keys.appendChild(buttons);
function selectFirstAvailableProgram () {
const { banks } = sf;
const banksFragment = stringToElements(banks.map(bank => `<option value="${bank.id}">${bank.name}</option>`).join());
window.banks.appendChild(banksFragment);
sf.bank = banks[0].id;
const { programs } = sf;
const program = programs[0];
const programsFragment = stringToElements(programs.map(program => `<option value="${program.id}">${program.name}</option>`).join());
window.programs.appendChild(programsFragment);
sf.program = program.id;
statusOutput.textContent = 'Using ' + program.name;
window.controls.classList.remove('hidden');
}
[...document.querySelectorAll('button')].forEach(button => {
const midiNum = parseInt(button.textContent, 10);
button.addEventListener('mousedown', () => sf.noteOn(midiNum), false);
button.addEventListener('mouseup', () => sf.noteOff(midiNum), false);
button.addEventListener('mouseover', () => sf.noteOff(midiNum), false);
button.addEventListener('mouseout', () => sf.noteOff(midiNum), false);
});
window.banks.addEventListener('change', e => {
sf.bank = e.target.value;
})
window.programs.addEventListener('change', e => {
sf.program = e.target.value;
})
fileInput.addEventListener('change', async e => {
const file = e.target.files[0];
statusOutput.textContent = 'Loading soundfont ' + file.name;
await sf.loadSoundFontFromFile(file);
statusOutput.textContent = 'Choosing first available program...';
selectFirstAvailableProgram();
})
</script>
</body>
</html>