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
|
import Fretboard from './fretboard.mjs';
import History from './history.mjs';
import KeyPicker from './key-picker.mjs';
import String from './string.mjs';
import Player from './player.mjs';
import { Note, toCents } from './scale.mjs';
function init() {
console.debug('init()', this);
String.register();
Fretboard.register();
KeyPicker.register();
History.register();
let player = undefined;
// todo: maybe just attach the listener to document?
document.querySelectorAll(Fretboard.name).forEach(f => {
f.addEventListener(f.saveEvent, e => {
document.querySelectorAll(History.name).forEach(h => {
console.debug('h is', h, 'e is', e.detail);
h.add(e.detail);
});
});
f.addEventListener(f.playEvent, e => {
console.debug('got playEvent', e, e.detail.notes);
const a = Note.fromString('A');
if (player) {
player.stop();
}
const played = e.detail.notes.map((n, i) => {
if (n !== 'x') {
return [Note.fromString(n), e.detail.octaves[i]]
}
}).filter(n => n);
player = new Player(played.map(([n, o]) => {
return toCents([a, 4], [n, o]);
}));
player.start();
});
f.addEventListener(f.stopEvent, e => {
console.debug('got stopEvent', e);
if (player) {
player.stop();
}
});
});
}
document.addEventListener('DOMContentLoaded', init);
|
