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
|
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';
// assume A440 tuning
const noteA = Note.fromString('A');
let player = undefined;
function save({ detail }) {
document.querySelectorAll(History.name).forEach(h => {
console.debug('h is', h, 'e is', detail);
h.add(detail);
});
}
function changed({ detail }) {
console.debug('got changedEvent', detail.notes);
const played = detail.notes.map((n, i) => {
if (n !== 'x') {
return [Note.fromString(n), detail.octaves[i]];
}
}).filter(n => n);
const getOffsets = () => {
return played.map(([n, o]) => toCents([noteA, 4], [n, o]));
}
player = document.querySelector('x-player');
player.getOffsets = getOffsets;
player.update();
}
function play({ detail }) {
console.debug('got playEvent', detail.notes);
if (player) {
player.isPlaying = true;
}
}
function stop(e) {
console.debug('got stopEvent', e);
if (player) {
player.isPlaying = false;
}
}
function noteEnter({ detail }) {
console.debug('got noteEnter', detail);
Array.from(document.querySelectorAll(`.fret [value='${detail.toString()}']`))
.map(f => f.parentNode)
.forEach(f => f.classList.add('hover'));
}
function noteLeave({ detail }) {
console.debug('got noteLeave', detail);
Array.from(document.querySelectorAll(`.fret [value='${detail.toString()}']`))
.map(f => f.parentNode)
.forEach(f => f.classList.remove('hover'));
}
function init() {
console.debug('init()', this);
String.register();
Fretboard.register();
KeyPicker.register();
History.register();
Player.register();
// todo: maybe just attach the listener to document?
document.querySelectorAll(Fretboard.name).forEach(f => {
f.addEventListener(f.saveEvent, save);
f.addEventListener(f.changedEvent, changed);
f.addEventListener(f.playEvent, play);
f.addEventListener(f.stopEvent, stop);
changed({ detail: f });
});
document.querySelectorAll(KeyPicker.name).forEach(kp => {
kp.addEventListener(kp.noteEnterEvent, noteEnter);
kp.addEventListener(kp.noteLeaveEvent, noteLeave);
});
}
document.addEventListener('DOMContentLoaded', init);
|
