Rockingcool/interactive-fretboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Rockingcool:6a63eb5d41352cb1f5504dbeed50eccc8879cc4a
Branches Tags
Rockingcool:main
...
compare: Rockingcool:main
Branches Tags
Rockingcool:main

5 Commits
6a63eb5d41 ... main

Author SHA1 Message Date
Aadhavan Srinivasan
315b220724 Lots of changes - fixed font sizes, added play chord button, minified sample loading 2025-08-04 16:25:41 -04:00
Aadhavan Srinivasan
80cbec0c9d Fix error in toneJS library 2025-07-15 10:04:33 -04:00
Aadhavan Srinivasan
3cc35e8dba Added new attribute - start-fret for which fret the fretboard starts on 2025-07-10 16:07:31 -04:00
Aadhavan Srinivasan
dc6acbe385 Two new attributes: center-align will align the fretboard horizontally to the center (it'll try, atleast); show-chord will show (or hide) the 'play chord' button 2025-07-02 16:09:23 -04:00
Aadhavan Srinivasan
812a08c051 Add ToneJS file 2025-07-02 16:07:53 -04:00
2 changed files with 753 additions and 130 deletions
Expand all files Collapse all files

632
js/src/Tonejs-Instruments.js Normal file
View File

@@ -0,0 +1,632 @@
/**
* @fileoverview A sample library and quick-loader for tone.js
*
* @author N.P. Brosowsky (nbrosowsky@gmail.com)
* https://github.com/nbrosowsky/tonejs-instruments
*/
export var SampleLibrary = {
minify: false,
ext: ".[mp3|ogg]", // use setExt to change the extensions on all files // do not change this variable //
baseUrl: "/samples/",
list: [
"bass-electric",
"bassoon",
"cello",
"clarinet",
"contrabass",
"flute",
"french-horn",
"guitar-acoustic",
"guitar-electric",
"guitar-nylon",
"harmonium",
"harp",
"organ",
"piano",
"saxophone",
"trombone",
"trumpet",
"tuba",
"violin",
"xylophone",
],
onload: null,
setExt: function (newExt) {
var i;
for (i = 0; i <= this.list.length - 1; i++) {
for (var property in this[this.list[i]]) {
this[this.list[i]][property] = this[this.list[i]][property].replace(this.ext, newExt);
}
}
this.ext = newExt;
return console.log("sample extensions set to " + this.ext);
},
load: function (arg) {
var t, rt, i;
arg ? (t = arg) : (t = {});
t.instruments = t.instruments || this.list;
t.baseUrl = t.baseUrl || this.baseUrl;
t.onload = t.onload || this.onload;
// update extensions if arg given
if (t.ext) {
if (t.ext != this.ext) {
this.setExt(t.ext);
}
t.ext = this.ext;
}
rt = {};
// if an array of instruments is passed...
if (Array.isArray(t.instruments)) {
for (i = 0; i <= t.instruments.length - 1; i++) {
var newT = this[t.instruments[i]];
//Minimize the number of samples to load
if (this.minify === true || t.minify === true) {
var minBy = 1;
if (Object.keys(newT).length >= 17) {
minBy = 2;
}
if (Object.keys(newT).length >= 33) {
minBy = 4;
}
if (Object.keys(newT).length >= 49) {
minBy = 6;
}
var filtered = Object.keys(newT).filter(function (_, i) {
return i % minBy != 0;
});
filtered.forEach(function (f) {
delete newT[f];
});
}
rt[t.instruments[i]] = new Tone.Sampler(newT, {
baseUrl: t.baseUrl + t.instruments[i] + "/",
onload: t.onload,
});
}
return rt;
// if a single instrument name is passed...
} else {
newT = this[t.instruments];
//Minimize the number of samples to load
if (this.minify === true || t.minify === true) {
minBy = 1;
if (Object.keys(newT).length >= 17) {
minBy = 2;
}
if (Object.keys(newT).length >= 33) {
minBy = 4;
}
if (Object.keys(newT).length >= 49) {
minBy = 6;
}
filtered = Object.keys(newT).filter(function (_, i) {
return i % minBy != 0;
});
filtered.forEach(function (f) {
delete newT[f];
});
}
var s = new Tone.Sampler(newT, {
baseUrl: t.baseUrl + t.instruments + "/",
onload: t.onload,
});
return s;
}
},
"bass-electric": {
"A#1": "As1.[mp3|ogg]",
"A#2": "As2.[mp3|ogg]",
"A#3": "As3.[mp3|ogg]",
"A#4": "As4.[mp3|ogg]",
"C#1": "Cs1.[mp3|ogg]",
"C#2": "Cs2.[mp3|ogg]",
"C#3": "Cs3.[mp3|ogg]",
"C#4": "Cs4.[mp3|ogg]",
E1: "E1.[mp3|ogg]",
E2: "E2.[mp3|ogg]",
E3: "E3.[mp3|ogg]",
E4: "E4.[mp3|ogg]",
G1: "G1.[mp3|ogg]",
G2: "G2.[mp3|ogg]",
G3: "G3.[mp3|ogg]",
G4: "G4.[mp3|ogg]",
},
bassoon: {
A4: "A4.[mp3|ogg]",
C3: "C3.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
C5: "C5.[mp3|ogg]",
E4: "E4.[mp3|ogg]",
G2: "G2.[mp3|ogg]",
G3: "G3.[mp3|ogg]",
G4: "G4.[mp3|ogg]",
A2: "A2.[mp3|ogg]",
A3: "A3.[mp3|ogg]",
},
cello: {
E3: "E3.[mp3|ogg]",
E4: "E4.[mp3|ogg]",
F2: "F2.[mp3|ogg]",
F3: "F3.[mp3|ogg]",
F4: "F4.[mp3|ogg]",
"F#3": "Fs3.[mp3|ogg]",
"F#4": "Fs4.[mp3|ogg]",
G2: "G2.[mp3|ogg]",
G3: "G3.[mp3|ogg]",
G4: "G4.[mp3|ogg]",
"G#2": "Gs2.[mp3|ogg]",
"G#3": "Gs3.[mp3|ogg]",
"G#4": "Gs4.[mp3|ogg]",
A2: "A2.[mp3|ogg]",
A3: "A3.[mp3|ogg]",
A4: "A4.[mp3|ogg]",
"A#2": "As2.[mp3|ogg]",
"A#3": "As3.[mp3|ogg]",
B2: "B2.[mp3|ogg]",
B3: "B3.[mp3|ogg]",
B4: "B4.[mp3|ogg]",
C2: "C2.[mp3|ogg]",
C3: "C3.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
C5: "C5.[mp3|ogg]",
"C#3": "Cs3.[mp3|ogg]",
"C#4": "Cs4.[mp3|ogg]",
D2: "D2.[mp3|ogg]",
D3: "D3.[mp3|ogg]",
D4: "D4.[mp3|ogg]",
"D#2": "Ds2.[mp3|ogg]",
"D#3": "Ds3.[mp3|ogg]",
"D#4": "Ds4.[mp3|ogg]",
E2: "E2.[mp3|ogg]",
},
clarinet: {
D4: "D4.[mp3|ogg]",
D5: "D5.[mp3|ogg]",
D6: "D6.[mp3|ogg]",
F3: "F3.[mp3|ogg]",
F4: "F4.[mp3|ogg]",
F5: "F5.[mp3|ogg]",
"F#6": "Fs6.[mp3|ogg]",
"A#3": "As3.[mp3|ogg]",
"A#4": "As4.[mp3|ogg]",
"A#5": "As5.[mp3|ogg]",
D3: "D3.[mp3|ogg]",
},
contrabass: {
C2: "C2.[mp3|ogg]",
"C#3": "Cs3.[mp3|ogg]",
D2: "D2.[mp3|ogg]",
E2: "E2.[mp3|ogg]",
E3: "E3.[mp3|ogg]",
"F#1": "Fs1.[mp3|ogg]",
"F#2": "Fs2.[mp3|ogg]",
G1: "G1.[mp3|ogg]",
"G#2": "Gs2.[mp3|ogg]",
"G#3": "Gs3.[mp3|ogg]",
A2: "A2.[mp3|ogg]",
"A#1": "As1.[mp3|ogg]",
B3: "B3.[mp3|ogg]",
},
flute: {
A6: "A6.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
C5: "C5.[mp3|ogg]",
C6: "C6.[mp3|ogg]",
C7: "C7.[mp3|ogg]",
E4: "E4.[mp3|ogg]",
E5: "E5.[mp3|ogg]",
E6: "E6.[mp3|ogg]",
A4: "A4.[mp3|ogg]",
A5: "A5.[mp3|ogg]",
},
"french-horn": {
D3: "D3.[mp3|ogg]",
D5: "D5.[mp3|ogg]",
"D#2": "Ds2.[mp3|ogg]",
F3: "F3.[mp3|ogg]",
F5: "F5.[mp3|ogg]",
G2: "G2.[mp3|ogg]",
A1: "A1.[mp3|ogg]",
A3: "A3.[mp3|ogg]",
C2: "C2.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
},
"guitar-acoustic": {
F4: "F4.[mp3|ogg]",
"F#2": "Fs2.[mp3|ogg]",
"F#3": "Fs3.[mp3|ogg]",
"F#4": "Fs4.[mp3|ogg]",
G2: "G2.[mp3|ogg]",
G3: "G3.[mp3|ogg]",
G4: "G4.[mp3|ogg]",
"G#2": "Gs2.[mp3|ogg]",
"G#3": "Gs3.[mp3|ogg]",
"G#4": "Gs4.[mp3|ogg]",
A2: "A2.[mp3|ogg]",
A3: "A3.[mp3|ogg]",
A4: "A4.[mp3|ogg]",
"A#2": "As2.[mp3|ogg]",
"A#3": "As3.[mp3|ogg]",
"A#4": "As4.[mp3|ogg]",
B2: "B2.[mp3|ogg]",
B3: "B3.[mp3|ogg]",
B4: "B4.[mp3|ogg]",
C3: "C3.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
C5: "C5.[mp3|ogg]",
"C#3": "Cs3.[mp3|ogg]",
"C#4": "Cs4.[mp3|ogg]",
"C#5": "Cs5.[mp3|ogg]",
D2: "D2.[mp3|ogg]",
D3: "D3.[mp3|ogg]",
D4: "D4.[mp3|ogg]",
D5: "D5.[mp3|ogg]",
"D#2": "Ds2.[mp3|ogg]",
"D#3": "Ds3.[mp3|ogg]",
"D#4": "Ds4.[mp3|ogg]",
E2: "E2.[mp3|ogg]",
E3: "E3.[mp3|ogg]",
E4: "E4.[mp3|ogg]",
F2: "F2.[mp3|ogg]",
F3: "F3.[mp3|ogg]",
},
"guitar-electric": {
"D#3": "Ds3.[mp3|ogg]",
"D#4": "Ds4.[mp3|ogg]",
"D#5": "Ds5.[mp3|ogg]",
E2: "E2.[mp3|ogg]",
"F#2": "Fs2.[mp3|ogg]",
"F#3": "Fs3.[mp3|ogg]",
"F#4": "Fs4.[mp3|ogg]",
"F#5": "Fs5.[mp3|ogg]",
A2: "A2.[mp3|ogg]",
A3: "A3.[mp3|ogg]",
A4: "A4.[mp3|ogg]",
A5: "A5.[mp3|ogg]",
C3: "C3.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
C5: "C5.[mp3|ogg]",
C6: "C6.[mp3|ogg]",
"C#2": "Cs2.[mp3|ogg]",
},
"guitar-nylon": {
"F#2": "Fs2.[mp3|ogg]",
"F#3": "Fs3.[mp3|ogg]",
"F#4": "Fs4.[mp3|ogg]",
"F#5": "Fs5.[mp3|ogg]",
G3: "G3.[mp3|ogg]",
G5: "G3.[mp3|ogg]",
"G#2": "Gs2.[mp3|ogg]",
"G#4": "Gs4.[mp3|ogg]",
"G#5": "Gs5.[mp3|ogg]",
A2: "A2.[mp3|ogg]",
A3: "A3.[mp3|ogg]",
A4: "A4.[mp3|ogg]",
A5: "A5.[mp3|ogg]",
"A#5": "As5.[mp3|ogg]",
B1: "B1.[mp3|ogg]",
B2: "B2.[mp3|ogg]",
B3: "B3.[mp3|ogg]",
B4: "B4.[mp3|ogg]",
"C#3": "Cs3.[mp3|ogg]",
"C#4": "Cs4.[mp3|ogg]",
"C#5": "Cs5.[mp3|ogg]",
D2: "D2.[mp3|ogg]",
D3: "D3.[mp3|ogg]",
D5: "D5.[mp3|ogg]",
"D#4": "Ds4.[mp3|ogg]",
E2: "E2.[mp3|ogg]",
E3: "E3.[mp3|ogg]",
E4: "E4.[mp3|ogg]",
E5: "E5.[mp3|ogg]",
},
harmonium: {
C2: "C2.[mp3|ogg]",
C3: "C3.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
C5: "C5.[mp3|ogg]",
"C#2": "Cs2.[mp3|ogg]",
"C#3": "Cs3.[mp3|ogg]",
"C#4": "Cs4.[mp3|ogg]",
"C#5": "Cs5.[mp3|ogg]",
D2: "D2.[mp3|ogg]",
D3: "D3.[mp3|ogg]",
D4: "D4.[mp3|ogg]",
D5: "D5.[mp3|ogg]",
"D#2": "Ds2.[mp3|ogg]",
"D#3": "Ds3.[mp3|ogg]",
"D#4": "Ds4.[mp3|ogg]",
E2: "E2.[mp3|ogg]",
E3: "E3.[mp3|ogg]",
E4: "E4.[mp3|ogg]",
F2: "F2.[mp3|ogg]",
F3: "F3.[mp3|ogg]",
F4: "F4.[mp3|ogg]",
"F#2": "Fs2.[mp3|ogg]",
"F#3": "Fs3.[mp3|ogg]",
G2: "G2.[mp3|ogg]",
G3: "G3.[mp3|ogg]",
G4: "G4.[mp3|ogg]",
"G#2": "Gs2.[mp3|ogg]",
"G#3": "Gs3.[mp3|ogg]",
"G#4": "Gs4.[mp3|ogg]",
A2: "A2.[mp3|ogg]",
A3: "A3.[mp3|ogg]",
A4: "A4.[mp3|ogg]",
"A#2": "As2.[mp3|ogg]",
"A#3": "As3.[mp3|ogg]",
"A#4": "As4.[mp3|ogg]",
},
harp: {
C5: "C5.[mp3|ogg]",
D2: "D2.[mp3|ogg]",
D4: "D4.[mp3|ogg]",
D6: "D6.[mp3|ogg]",
D7: "D7.[mp3|ogg]",
E1: "E1.[mp3|ogg]",
E3: "E3.[mp3|ogg]",
E5: "E5.[mp3|ogg]",
F2: "F2.[mp3|ogg]",
F4: "F4.[mp3|ogg]",
F6: "F6.[mp3|ogg]",
F7: "F7.[mp3|ogg]",
G1: "G1.[mp3|ogg]",
G3: "G3.[mp3|ogg]",
G5: "G5.[mp3|ogg]",
A2: "A2.[mp3|ogg]",
A4: "A4.[mp3|ogg]",
A6: "A6.[mp3|ogg]",
B1: "B1.[mp3|ogg]",
B3: "B3.[mp3|ogg]",
B5: "B5.[mp3|ogg]",
B6: "B6.[mp3|ogg]",
C3: "C3.[mp3|ogg]",
},
organ: {
C3: "C3.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
C5: "C5.[mp3|ogg]",
C6: "C6.[mp3|ogg]",
"D#1": "Ds1.[mp3|ogg]",
"D#2": "Ds2.[mp3|ogg]",
"D#3": "Ds3.[mp3|ogg]",
"D#4": "Ds4.[mp3|ogg]",
"D#5": "Ds5.[mp3|ogg]",
"F#1": "Fs1.[mp3|ogg]",
"F#2": "Fs2.[mp3|ogg]",
"F#3": "Fs3.[mp3|ogg]",
"F#4": "Fs4.[mp3|ogg]",
"F#5": "Fs5.[mp3|ogg]",
A1: "A1.[mp3|ogg]",
A2: "A2.[mp3|ogg]",
A3: "A3.[mp3|ogg]",
A4: "A4.[mp3|ogg]",
A5: "A5.[mp3|ogg]",
C1: "C1.[mp3|ogg]",
C2: "C2.[mp3|ogg]",
},
piano: {
A7: "A7.[mp3|ogg]",
A1: "A1.[mp3|ogg]",
A2: "A2.[mp3|ogg]",
A3: "A3.[mp3|ogg]",
A4: "A4.[mp3|ogg]",
A5: "A5.[mp3|ogg]",
A6: "A6.[mp3|ogg]",
"A#7": "As7.[mp3|ogg]",
"A#1": "As1.[mp3|ogg]",
"A#2": "As2.[mp3|ogg]",
"A#3": "As3.[mp3|ogg]",
"A#4": "As4.[mp3|ogg]",
"A#5": "As5.[mp3|ogg]",
"A#6": "As6.[mp3|ogg]",
B7: "B7.[mp3|ogg]",
B1: "B1.[mp3|ogg]",
B2: "B2.[mp3|ogg]",
B3: "B3.[mp3|ogg]",
B4: "B4.[mp3|ogg]",
B5: "B5.[mp3|ogg]",
B6: "B6.[mp3|ogg]",
C7: "C7.[mp3|ogg]",
C1: "C1.[mp3|ogg]",
C2: "C2.[mp3|ogg]",
C3: "C3.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
C5: "C5.[mp3|ogg]",
C6: "C6.[mp3|ogg]",
C7: "C7.[mp3|ogg]",
"C#7": "Cs7.[mp3|ogg]",
"C#1": "Cs1.[mp3|ogg]",
"C#2": "Cs2.[mp3|ogg]",
"C#3": "Cs3.[mp3|ogg]",
"C#4": "Cs4.[mp3|ogg]",
"C#5": "Cs5.[mp3|ogg]",
"C#6": "Cs6.[mp3|ogg]",
D7: "D7.[mp3|ogg]",
D1: "D1.[mp3|ogg]",
D2: "D2.[mp3|ogg]",
D3: "D3.[mp3|ogg]",
D4: "D4.[mp3|ogg]",
D5: "D5.[mp3|ogg]",
D6: "D6.[mp3|ogg]",
"D#7": "Ds7.[mp3|ogg]",
"D#1": "Ds1.[mp3|ogg]",
"D#2": "Ds2.[mp3|ogg]",
"D#3": "Ds3.[mp3|ogg]",
"D#4": "Ds4.[mp3|ogg]",
"D#5": "Ds5.[mp3|ogg]",
"D#6": "Ds6.[mp3|ogg]",
E7: "E7.[mp3|ogg]",
E1: "E1.[mp3|ogg]",
E2: "E2.[mp3|ogg]",
E3: "E3.[mp3|ogg]",
E4: "E4.[mp3|ogg]",
E5: "E5.[mp3|ogg]",
E6: "E6.[mp3|ogg]",
F7: "F7.[mp3|ogg]",
F1: "F1.[mp3|ogg]",
F2: "F2.[mp3|ogg]",
F3: "F3.[mp3|ogg]",
F4: "F4.[mp3|ogg]",
F5: "F5.[mp3|ogg]",
F6: "F6.[mp3|ogg]",
"F#7": "Fs7.[mp3|ogg]",
"F#1": "Fs1.[mp3|ogg]",
"F#2": "Fs2.[mp3|ogg]",
"F#3": "Fs3.[mp3|ogg]",
"F#4": "Fs4.[mp3|ogg]",
"F#5": "Fs5.[mp3|ogg]",
"F#6": "Fs6.[mp3|ogg]",
G7: "G7.[mp3|ogg]",
G1: "G1.[mp3|ogg]",
G2: "G2.[mp3|ogg]",
G3: "G3.[mp3|ogg]",
G4: "G4.[mp3|ogg]",
G5: "G5.[mp3|ogg]",
G6: "G6.[mp3|ogg]",
"G#7": "Gs7.[mp3|ogg]",
"G#1": "Gs1.[mp3|ogg]",
"G#2": "Gs2.[mp3|ogg]",
"G#3": "Gs3.[mp3|ogg]",
"G#4": "Gs4.[mp3|ogg]",
"G#5": "Gs5.[mp3|ogg]",
"G#6": "Gs6.[mp3|ogg]",
},
saxophone: {
"D#5": "Ds5.[mp3|ogg]",
E3: "E3.[mp3|ogg]",
E4: "E4.[mp3|ogg]",
E5: "E5.[mp3|ogg]",
F3: "F3.[mp3|ogg]",
F4: "F4.[mp3|ogg]",
F5: "F5.[mp3|ogg]",
"F#3": "Fs3.[mp3|ogg]",
"F#4": "Fs4.[mp3|ogg]",
"F#5": "Fs5.[mp3|ogg]",
G3: "G3.[mp3|ogg]",
G4: "G4.[mp3|ogg]",
G5: "G5.[mp3|ogg]",
"G#3": "Gs3.[mp3|ogg]",
"G#4": "Gs4.[mp3|ogg]",
"G#5": "Gs5.[mp3|ogg]",
A4: "A4.[mp3|ogg]",
A5: "A5.[mp3|ogg]",
"A#3": "As3.[mp3|ogg]",
"A#4": "As4.[mp3|ogg]",
B3: "B3.[mp3|ogg]",
B4: "B4.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
C5: "C5.[mp3|ogg]",
"C#3": "Cs3.[mp3|ogg]",
"C#4": "Cs4.[mp3|ogg]",
"C#5": "Cs5.[mp3|ogg]",
D3: "D3.[mp3|ogg]",
D4: "D4.[mp3|ogg]",
D5: "D5.[mp3|ogg]",
"D#3": "Ds3.[mp3|ogg]",
"D#4": "Ds4.[mp3|ogg]",
},
trombone: {
"A#3": "As3.[mp3|ogg]",
C3: "C3.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
"C#2": "Cs2.[mp3|ogg]",
"C#4": "Cs4.[mp3|ogg]",
D3: "D3.[mp3|ogg]",
D4: "D4.[mp3|ogg]",
"D#2": "Ds2.[mp3|ogg]",
"D#3": "Ds3.[mp3|ogg]",
"D#4": "Ds4.[mp3|ogg]",
F2: "F2.[mp3|ogg]",
F3: "F3.[mp3|ogg]",
F4: "F4.[mp3|ogg]",
"G#2": "Gs2.[mp3|ogg]",
"G#3": "Gs3.[mp3|ogg]",
"A#1": "As1.[mp3|ogg]",
"A#2": "As2.[mp3|ogg]",
},
trumpet: {
C6: "C6.[mp3|ogg]",
D5: "D5.[mp3|ogg]",
"D#4": "Ds4.[mp3|ogg]",
F3: "F3.[mp3|ogg]",
F4: "F4.[mp3|ogg]",
F5: "F5.[mp3|ogg]",
G4: "G4.[mp3|ogg]",
A3: "A3.[mp3|ogg]",
A5: "A5.[mp3|ogg]",
"A#4": "As4.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
},
tuba: {
"A#2": "As2.[mp3|ogg]",
"A#3": "As3.[mp3|ogg]",
D3: "D3.[mp3|ogg]",
D4: "D4.[mp3|ogg]",
"D#2": "Ds2.[mp3|ogg]",
F1: "F1.[mp3|ogg]",
F2: "F2.[mp3|ogg]",
F3: "F3.[mp3|ogg]",
"A#1": "As1.[mp3|ogg]",
},
violin: {
A3: "A3.[mp3|ogg]",
A4: "A4.[mp3|ogg]",
A5: "A5.[mp3|ogg]",
A6: "A6.[mp3|ogg]",
C4: "C4.[mp3|ogg]",
C5: "C5.[mp3|ogg]",
C6: "C6.[mp3|ogg]",
C7: "C7.[mp3|ogg]",
E4: "E4.[mp3|ogg]",
E5: "E5.[mp3|ogg]",
E6: "E6.[mp3|ogg]",
G4: "G4.[mp3|ogg]",
G5: "G5.[mp3|ogg]",
G6: "G6.[mp3|ogg]",
},
xylophone: {
C8: "C8.[mp3|ogg]",
G4: "G4.[mp3|ogg]",
G5: "G5.[mp3|ogg]",
G6: "G6.[mp3|ogg]",
G7: "G7.[mp3|ogg]",
C5: "C5.[mp3|ogg]",
C6: "C6.[mp3|ogg]",
C7: "C7.[mp3|ogg]",
},
};

251
js/src/guitar-diagrams-web-component.mjs
View File

@@ -1,7 +1,7 @@
import { GuitarDiagramsJSConfig } from "./guitar-diagrams-config.mjs";
import { GuitarDiagramsJSMarker } from "./guitar-diagrams-marker.mjs";
import "./tone.js";
import { SampleLibrary } from "./tonejs-instruments/Tonejs-Instruments.js";
import { SampleLibrary } from "./Tonejs-Instruments.js";
class GuitarDiagramsWebComponent extends HTMLElement {
// ========== BEGIN private members
@@ -84,6 +84,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
this.#outputSpeaker = SampleLibrary.load({
instruments: "guitar-acoustic",
ext: ".ogg",
minify: true,
});
this.#outputSpeaker.toMaster();
@@ -97,6 +98,26 @@ class GuitarDiagramsWebComponent extends HTMLElement {
}
connectedCallback() {
if (this.getAttribute("center-align") == "true") {
let canvas = this.#docRoot.getElementById(this.#config.canvasID);
// canvas.style["position"] = "absolute";
// canvas.style["left"] = "50vw";
// canvas.style["transform"] = "translate(-50%, -50%)";
//
// canvas.style["padding-left"] = 0;
// canvas.style["padding-right"] = 0;
// canvas.style["margin-left"] = "auto";
// canvas.style["margin-right"] = "auto";
// canvas.style["display"] = "block";
// canvas.style["width"] = "1000px";
// canvas.style.width = "50vw";
canvas.style.display = "block";
canvas.style.margin = "0 auto";
canvas.style.position = "relative";
canvas.style.left = "50%";
canvas.style["padding-bottom"] = "1em";
canvas.style.transform = "translateX(-50%)";
}
this.drawNeck();
let markerList = Array.from(this.getElementsByTagName("marker"));
@@ -111,21 +132,27 @@ class GuitarDiagramsWebComponent extends HTMLElement {
);
});
let chordsButton = document.createElement("button");
const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
chordsButton.setAttribute(
"onclick",
"this.getRootNode().host.playAllMarkers()",
);
chordsButton.innerHTML = "Play chord";
if (markerList.length > 0 && this.getAttribute("show-chord") == "true") {
let chordsButton = document.createElement("button");
const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
chordsButton.setAttribute("onclick", "this.getRootNode().host.playAllMarkers()");
chordsButton.innerHTML = "Play chord";
this.#docRoot.appendChild(chordsButton);
this.#docRoot.appendChild(chordsButton);
}
this.drawAllMarkers();
}
static get observedAttributes() {
return ["canvas-id", "orient-horizontally", "fret-count", "scale-factor"];
return [
"canvas-id",
"orient-horizontally",
"fret-count",
"scale-factor",
"start-fret",
"center-align",
];
}
attributeChangedCallback(name, oldValue, newValue) {
@@ -142,6 +169,29 @@ class GuitarDiagramsWebComponent extends HTMLElement {
case "scale-factor":
this.#config.scaleFactor = parseFloat(newValue);
break;
case "start-fret":
this.#config.fretStartingNumber = parseFloat(newValue);
break;
case "center-align":
if (newValue == "true") {
let canvas = this.#docRoot.getElementById(this.#config.canvasID);
// canvas.style["position"] = "absolute";
// canvas.style["left"] = "50vw";
// canvas.style["transform"] = "translate(-50%, -50%)";
//
// canvas.style["padding-left"] = 0;
// canvas.style["padding-right"] = 0;
// canvas.style["margin-left"] = "auto";
// canvas.style["margin-right"] = "auto";
// canvas.style["display"] = "block";
// canvas.style["width"] = "1000px";
// canvas.style.width = "50vw";
canvas.style.display = "block";
canvas.style.margin = "0 auto";
canvas.style.position = "relative";
canvas.style.left = "50%";
canvas.style.transform = "translateX(-50%)";
}
}
this.drawNeck();
this.drawAllMarkers();
@@ -152,28 +202,28 @@ class GuitarDiagramsWebComponent extends HTMLElement {
const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
const context = canvas.getContext("2d");
let fretNumberFontSize = this.#scale(
GuitarDiagramsWebComponent.fretNumberFontSize,
);
let fretNumberIndent =
this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
let stringNameFontSize = this.#scale(
GuitarDiagramsWebComponent.stringNameFontSize,
);
let fretNumberFontSize = this.#scale(GuitarDiagramsWebComponent.fretNumberFontSize);
let fretNumberIndent = this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
let stringNameFontSize = this.#scale(GuitarDiagramsWebComponent.stringNameFontSize);
let stringNameIndent =
this.#config.stringNamesEnabled == false
? 0
: stringNameFontSize *
GuitarDiagramsWebComponent.stringNamePaddingFactor;
let canvasHeight =
this.#scale(this.#getFretboardLength()) + stringNameIndent;
: stringNameFontSize * GuitarDiagramsWebComponent.stringNamePaddingFactor;
let canvasHeight = this.#scale(this.#getFretboardLength()) + stringNameIndent;
let canvasWidth = this.#scale(this.#getFretboardWidth()) + fretNumberIndent;
if (this.#config.orientHorizontally == true) {
[canvasHeight, canvasWidth] = [canvasWidth, canvasHeight];
}
// if (this.#docRoot.getElementById(this.#config.canvasID).style.width) {
// canvasWidth = this.#docRoot.getElementById(this.#config.canvasID).style
// .width;
// }
canvas.setAttribute("width", canvasWidth);
if (this.getAttribute("center-align") == "true") {
canvas.style["width"] = canvasWidth + "px";
}
canvas.setAttribute("height", canvasHeight);
let colorDiagramBackground = this.#config.colorDiagramBackground;
@@ -192,14 +242,9 @@ class GuitarDiagramsWebComponent extends HTMLElement {
if (this.#config.stringNamesEnabled) {
let stringSpacing = this.#scale(GuitarDiagramsWebComponent.stringSpacing);
let stringIndent = this.#scale(GuitarDiagramsWebComponent.stringIndent);
let stringNameFontSize = this.#scale(
GuitarDiagramsWebComponent.stringNameFontSize,
);
let fretNumberFontSize = this.#scale(
GuitarDiagramsWebComponent.fretNumberFontSize,
);
let stringNamesIndent =
this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
let stringNameFontSize = this.#scale(GuitarDiagramsWebComponent.stringNameFontSize);
let fretNumberFontSize = this.#scale(GuitarDiagramsWebComponent.fretNumberFontSize);
let stringNamesIndent = this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
let posX;
let posY;
let stringNames = [...this.#config.stringNames];
@@ -211,11 +256,9 @@ class GuitarDiagramsWebComponent extends HTMLElement {
for (const [stringNumber, stringName] of Object.entries(stringNames)) {
if (this.#config.orientHorizontally == true) {
posX = stringNameFontSize / 2;
posY =
stringIndent + stringNumber * stringSpacing + stringNamesIndent;
posY = stringIndent + stringNumber * stringSpacing + stringNamesIndent;
} else {
posX =
stringIndent + stringNumber * stringSpacing + stringNamesIndent;
posX = stringIndent + stringNumber * stringSpacing + stringNamesIndent;
posY = stringNameFontSize / 2;
}
@@ -231,15 +274,13 @@ class GuitarDiagramsWebComponent extends HTMLElement {
if (this.#config.orientHorizontally == true) {
canvas.translate(
stringNameFontSize *
GuitarDiagramsWebComponent.stringNamePaddingFactor,
stringNameFontSize * GuitarDiagramsWebComponent.stringNamePaddingFactor,
0,
);
} else {
canvas.translate(
0,
stringNameFontSize *
GuitarDiagramsWebComponent.stringNamePaddingFactor,
stringNameFontSize * GuitarDiagramsWebComponent.stringNamePaddingFactor,
);
}
}
@@ -247,9 +288,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
#drawFretNumber() {
const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
let fretNumberFontSize = this.#scale(
GuitarDiagramsWebComponent.fretNumberFontSize,
);
let fretNumberFontSize = this.#scale(GuitarDiagramsWebComponent.fretNumberFontSize);
if (this.#config.fretStartingNumber != 0) {
canvas.beginPath();
@@ -310,10 +349,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
#drawAllFretMarkers() {
if (this.#config.fretMarkersEnabled) {
if (
this.#config.fretStartingNumber != 0 &&
this.#config.fretStartingNumber % 2 == 0
) {
if (this.#config.fretStartingNumber != 0 && this.#config.fretStartingNumber % 2 == 0) {
this.#drawFretMarker(1);
this.#drawFretMarker(3);
} else {
@@ -323,6 +359,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
this.#drawFretMarker(2);
this.#drawFretMarker(4);
this.#drawFretMarker(6);
}
}
}
@@ -331,9 +368,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
let fretboardWidth = this.#scale(this.#getFretboardWidth());
let fretSpacing = this.#scale(GuitarDiagramsWebComponent.fretSpacing);
let fretMarkerRadius = this.#scale(
GuitarDiagramsWebComponent.fretMarkerRadius,
);
let fretMarkerRadius = this.#scale(GuitarDiagramsWebComponent.fretMarkerRadius);
let posX = fretboardWidth / 2;
let posY = fretSpacing / 2 + fretSpacing * paramFretNumber;
@@ -392,12 +427,8 @@ class GuitarDiagramsWebComponent extends HTMLElement {
const stringCount = this.#config.stringNames.length;
let stringIndent = this.#scale(GuitarDiagramsWebComponent.stringIndent);
let stringSpacing = this.#scale(GuitarDiagramsWebComponent.stringSpacing);
let stringBaseWidth = this.#scale(
GuitarDiagramsWebComponent.stringBaseWidth,
);
let stringWidthFactor = this.#scale(
GuitarDiagramsWebComponent.stringWidthFactor,
);
let stringBaseWidth = this.#scale(GuitarDiagramsWebComponent.stringBaseWidth);
let stringWidthFactor = this.#scale(GuitarDiagramsWebComponent.stringWidthFactor);
let fretboardLength = this.#scale(this.#getFretboardLength());
let fretboardWidth = this.#scale(this.#getFretboardWidth());
let posX = 0;
@@ -413,18 +444,11 @@ class GuitarDiagramsWebComponent extends HTMLElement {
(paramStringNumber - 1) * stringSpacing -
stringBaseWidth / 2;
endX = fretboardLength;
endY =
stringBaseWidth +
(stringCount - (paramStringNumber - 1)) * stringWidthFactor;
endY = stringBaseWidth + (stringCount - (paramStringNumber - 1)) * stringWidthFactor;
} else {
posX =
stringIndent +
(paramStringNumber - 1) * stringSpacing -
stringBaseWidth / 2;
posX = stringIndent + (paramStringNumber - 1) * stringSpacing - stringBaseWidth / 2;
posY = 0;
endX =
stringBaseWidth +
(stringCount - (paramStringNumber - 1)) * stringWidthFactor;
endX = stringBaseWidth + (stringCount - (paramStringNumber - 1)) * stringWidthFactor;
endY = fretboardLength;
}
@@ -446,9 +470,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
let strokeWidth = this.#scale(this.#config.markerStrokeWidth);
let markerFontSize = this.#scale(this.#config.markerFontSize);
let posX =
stringIndent +
(stringCount - paramMarker.string) * stringSpacing +
strokeWidth * 0.5;
stringIndent + (stringCount - paramMarker.string) * stringSpacing + strokeWidth * 0.5;
let posY = (paramMarker.fret - 1) * fretSpacing + fretSpacing / 2;
if (paramMarker.fret == 0) {
@@ -456,16 +478,11 @@ class GuitarDiagramsWebComponent extends HTMLElement {
}
if (this.#config.orientHorizontally == true) {
posX =
stringIndent +
(paramMarker.string - 1) * stringSpacing +
strokeWidth * 0.5;
posX = stringIndent + (paramMarker.string - 1) * stringSpacing + strokeWidth * 0.5;
[posX, posY] = [posY, posX];
}
const boundingRect = this.shadowRoot
.querySelector("canvas")
.getBoundingClientRect();
const boundingRect = this.shadowRoot.querySelector("canvas").getBoundingClientRect();
paramMarker.relativePosX = posX;
paramMarker.relativePosY = posY;
@@ -478,11 +495,19 @@ class GuitarDiagramsWebComponent extends HTMLElement {
GuitarDiagramsWebComponent.stringNameFontSize *
GuitarDiagramsWebComponent.stringNamePaddingFactor *
this.#config.scaleFactor;
paramMarker.posY +=
this.#config.fretStartingNumber == 0
? 0
: GuitarDiagramsWebComponent.fretNumberFontSize * this.#config.scaleFactor;
} else {
paramMarker.posY +=
GuitarDiagramsWebComponent.stringNameFontSize *
GuitarDiagramsWebComponent.stringNamePaddingFactor *
this.#config.scaleFactor;
paramMarker.posX +=
this.#config.fretStartingNumber == 0
? 0
: GuitarDiagramsWebComponent.fretNumberFontSize * this.#config.scaleFactor;
}
// paramMarker.posX = posX + boundingRect.left - window.pageXOffset;
@@ -610,19 +635,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
if (
this.#config.changeOrientationEnabled &&
!this.#docRoot.getElementById(
this.#config.canvasID + "-change-orientation-button",
)
!this.#docRoot.getElementById(this.#config.canvasID + "-change-orientation-button")
) {
let changeOrientationButton = this.#docRoot.createElement("input");
changeOrientationButton.type = "button";
changeOrientationButton.id =
this.#config.canvasID + "-change-orientation-button";
changeOrientationButton.id = this.#config.canvasID + "-change-orientation-button";
changeOrientationButton.style = "margin: " + controlMargins + ";";
changeOrientationButton.classList.add(
controlClassPrefix + "change-orientation-button",
);
changeOrientationButton.classList.add(controlClassPrefix + "change-orientation-button");
changeOrientationButton.classList.add(controlClass);
changeOrientationButton.value = String.fromCodePoint(0x1f500);
@@ -637,18 +657,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
if (
this.#config.downloadImageEnabled &&
!this.#docRoot.getElementById(
this.#config.canvasID + "-download-image-button",
)
!this.#docRoot.getElementById(this.#config.canvasID + "-download-image-button")
) {
let downloadButton = this.#docRoot.createElement("input");
downloadButton.type = "button";
downloadButton.id = this.#config.canvasID + "-download-image-button";
downloadButton.style = "margin: " + controlMargins + ";";
downloadButton.classList.add(
controlClassPrefix + "download-image-button",
);
downloadButton.classList.add(controlClassPrefix + "download-image-button");
downloadButton.classList.add(controlClass);
downloadButton.value = String.fromCodePoint(0x1f4be);
@@ -677,8 +693,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
#getFretboardWidth() {
let stringSpacing = GuitarDiagramsWebComponent.stringSpacing;
let stringIndent = GuitarDiagramsWebComponent.stringIndent;
let fretboardWidth =
this.#config.stringNames.length * stringSpacing + stringIndent / 2;
let fretboardWidth = this.#config.stringNames.length * stringSpacing + stringIndent / 2;
return fretboardWidth;
}
@@ -746,18 +761,12 @@ class GuitarDiagramsWebComponent extends HTMLElement {
marker.fret = paramFret;
marker.text = paramText;
marker.playSound = playSound;
marker.shape =
paramShape == null
? GuitarDiagramsWebComponent.Shape.Circle
: paramShape;
marker.shape = paramShape == null ? GuitarDiagramsWebComponent.Shape.Circle : paramShape;
marker.eventCallbacks = callbacks == null ? new Map() : callbacks;
if (playSound) {
marker.eventCallbacks.set("click", (elem) => {
this.#outputSpeaker.triggerAttackRelease(
this.markerToNoteFrequency(marker),
"2n",
);
this.#outputSpeaker.triggerAttackRelease(this.markerToNoteFrequency(marker), "2n");
});
marker.eventCallbacks.set("mousemove", (elem) => {
console.log("marker hovered");
@@ -794,13 +803,8 @@ class GuitarDiagramsWebComponent extends HTMLElement {
markersWithEvent.forEach((marker) => {
if (marker.shape == GuitarDiagramsWebComponent.Shape.Circle) {
if (
Math.pow(marker.posX - mouseX, 2) +
Math.pow(marker.posY - mouseY, 2) <
Math.pow(
GuitarDiagramsWebComponent.markerRadius *
this.#config.scaleFactor,
2,
)
Math.pow(marker.posX - mouseX, 2) + Math.pow(marker.posY - mouseY, 2) <
Math.pow(GuitarDiagramsWebComponent.markerRadius * this.#config.scaleFactor, 2)
) {
marker.eventCallbacks.get(event.type)();
}
@@ -813,35 +817,20 @@ class GuitarDiagramsWebComponent extends HTMLElement {
markersWithEvent.forEach((marker) => {
if (marker.shape == GuitarDiagramsWebComponent.Shape.Circle) {
if (
Math.pow(marker.posX - mouseX, 2) +
Math.pow(marker.posY - mouseY, 2) <
Math.pow(
GuitarDiagramsWebComponent.markerRadius *
this.#config.scaleFactor,
2,
)
Math.pow(marker.posX - mouseX, 2) + Math.pow(marker.posY - mouseY, 2) <
Math.pow(GuitarDiagramsWebComponent.markerRadius * this.#config.scaleFactor, 2)
) {
cursorPointer = true;
const canvas = this.shadowRoot
.querySelector("canvas")
.getContext("2d");
const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
canvas.beginPath();
canvas.fillStyle = "yellow";
this.#drawMarkerCircle(
marker.relativePosX,
marker.relativePosY,
);
this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
canvas.closePath();
} else {
const canvas = this.shadowRoot
.querySelector("canvas")
.getContext("2d");
const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
canvas.beginPath();
canvas.fillStyle = marker.colorFill;
this.#drawMarkerCircle(
marker.relativePosX,
marker.relativePosY,
);
this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
canvas.closePath();
}
}
@@ -857,9 +846,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
}
playAllMarkers() {
let allNoteFrequencies = this.#markers.map((marker) =>
this.markerToNoteFrequency(marker),
);
let allNoteFrequencies = this.#markers.map((marker) => this.markerToNoteFrequency(marker));
// play slowly
let timeGap = 0;
@@ -919,7 +906,11 @@ class GuitarDiagramsWebComponent extends HTMLElement {
baseFreq = 82;
}
const semitoneOffset = Math.pow(2, marker.fret / 12);
let currentFret = parseFloat(marker.fret);
if (typeof this.#config.fretStartingNumber !== "undefined") {
currentFret += parseFloat(this.#config.fretStartingNumber);
}
const semitoneOffset = Math.pow(2, currentFret / 12);
let finalNote = baseFreq * semitoneOffset;
return finalNote;
}