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