-
Notifications
You must be signed in to change notification settings - Fork 2
/
tonnetz.js
82 lines (58 loc) · 1.96 KB
/
tonnetz.js
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
//create a four voice synth
var polySynth = new Tone.PolySynth(4, Tone.Synth).toMaster();
var tonnetz = document.getElementById("tonnetz");
var oscillatorWaveformSelect = document.getElementById("oscillator-waveform");
tonnetz.addEventListener("load", attachSounds);
function attachSounds(event) {
var tonnetzSvg = this.getSVGDocument();
attachNoteSounds(tonnetzSvg);
attachChordSounds(tonnetzSvg);
}
function attachNoteSounds (tonnetzSvg) {
var notes = tonnetzSvg.querySelectorAll(".note");
notes.forEach(function (element) {
element.addEventListener("mousedown", playNote);
element.addEventListener("mouseup", stopNote);
});
}
function playNote(event) {
var note = event.target.dataset["notes"];
polySynth.triggerAttack(`${note}4`)
}
function stopNote(event) {
var note = event.target.dataset["notes"];
polySynth.triggerRelease(`${note}4`)
}
function attachChordSounds (tonnetzSvg) {
var chords = tonnetzSvg.querySelectorAll(".chord");
chords.forEach(function (element) {
element.addEventListener("mousedown", playChord);
element.addEventListener("mouseup", stopChord);
});
}
function playChord(event, chordNotes) {
var tonic = event.target.dataset["tonic"];
var quality = event.target.dataset["quality"];
var chord = teoria.note(tonic).chord(quality).simple()
var notes_with_octave = chord.map(note => {
return `${note}4`
});
polySynth.triggerAttack(notes_with_octave);
}
function stopChord(event) {
var tonic = event.target.dataset["tonic"];
var quality = event.target.dataset["quality"];
var chord = teoria.note(tonic).chord(quality).simple()
var notes_with_octave = chord.map(note => {
return `${note}4`
});
polySynth.triggerRelease(notes_with_octave)
}
function changeSynthWaveform(select) {
oscillatorType = select.value;
polySynth.set({
"oscillator": {
"type": oscillatorType
}
});
}