Lots of changes - fixed font sizes, added play chord button, minified sample loading

js/src/Tonejs-Instruments.js

@@ -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]",
+  },
+};

js/src/guitar-diagrams-web-component.mjs

@@ -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");
+    if (markerList.length > 0 && this.getAttribute("show-chord") == "true") {
-    const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
+      let chordsButton = document.createElement("button");
-    chordsButton.setAttribute(
+      const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
-      "onclick",
+      chordsButton.setAttribute("onclick", "this.getRootNode().host.playAllMarkers()");
-      "this.getRootNode().host.playAllMarkers()",
+      chordsButton.innerHTML = "Play chord";
-    );
-    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(
+    let fretNumberFontSize = this.#scale(GuitarDiagramsWebComponent.fretNumberFontSize);
-      GuitarDiagramsWebComponent.fretNumberFontSize,
+    let fretNumberIndent = this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
-    );
+    let stringNameFontSize = this.#scale(GuitarDiagramsWebComponent.stringNameFontSize);
-    let fretNumberIndent =
-      this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
-    let stringNameFontSize = this.#scale(
-      GuitarDiagramsWebComponent.stringNameFontSize,
-    );
     let stringNameIndent =
       this.#config.stringNamesEnabled == false
         ? 0
-        : stringNameFontSize *
+        : stringNameFontSize * GuitarDiagramsWebComponent.stringNamePaddingFactor;
-          GuitarDiagramsWebComponent.stringNamePaddingFactor;
+    let canvasHeight = this.#scale(this.#getFretboardLength()) + stringNameIndent;
-    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(
+      let stringNameFontSize = this.#scale(GuitarDiagramsWebComponent.stringNameFontSize);
-        GuitarDiagramsWebComponent.stringNameFontSize,
+      let fretNumberFontSize = this.#scale(GuitarDiagramsWebComponent.fretNumberFontSize);
-      );
+      let stringNamesIndent = this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
-      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 =
+          posY = stringIndent + stringNumber * stringSpacing + stringNamesIndent;
-            stringIndent + stringNumber * stringSpacing + stringNamesIndent;
         } else {
-          posX =
+          posX = stringIndent + stringNumber * stringSpacing + stringNamesIndent;
-            stringIndent + stringNumber * stringSpacing + stringNamesIndent;
           posY = stringNameFontSize / 2;
         }
 
@@ -231,15 +274,13 @@ class GuitarDiagramsWebComponent extends HTMLElement {
 
       if (this.#config.orientHorizontally == true) {
         canvas.translate(
-          stringNameFontSize *
+          stringNameFontSize * GuitarDiagramsWebComponent.stringNamePaddingFactor,
-            GuitarDiagramsWebComponent.stringNamePaddingFactor,
           0,
         );
       } else {
         canvas.translate(
           0,
-          stringNameFontSize *
+          stringNameFontSize * GuitarDiagramsWebComponent.stringNamePaddingFactor,
-            GuitarDiagramsWebComponent.stringNamePaddingFactor,
         );
       }
     }
@@ -247,9 +288,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
 
   #drawFretNumber() {
     const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
-    let fretNumberFontSize = this.#scale(
+    let fretNumberFontSize = this.#scale(GuitarDiagramsWebComponent.fretNumberFontSize);
-      GuitarDiagramsWebComponent.fretNumberFontSize,
-    );
 
     if (this.#config.fretStartingNumber != 0) {
       canvas.beginPath();
@@ -310,10 +349,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
 
   #drawAllFretMarkers() {
     if (this.#config.fretMarkersEnabled) {
-      if (
+      if (this.#config.fretStartingNumber != 0 && this.#config.fretStartingNumber % 2 == 0) {
-        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(
+    let fretMarkerRadius = this.#scale(GuitarDiagramsWebComponent.fretMarkerRadius);
-      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(
+    let stringBaseWidth = this.#scale(GuitarDiagramsWebComponent.stringBaseWidth);
-      GuitarDiagramsWebComponent.stringBaseWidth,
+    let stringWidthFactor = this.#scale(GuitarDiagramsWebComponent.stringWidthFactor);
-    );
-    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 =
+      endY = stringBaseWidth + (stringCount - (paramStringNumber - 1)) * stringWidthFactor;
-        stringBaseWidth +
-        (stringCount - (paramStringNumber - 1)) * stringWidthFactor;
     } else {
-      posX =
+      posX = stringIndent + (paramStringNumber - 1) * stringSpacing - stringBaseWidth / 2;
-        stringIndent +
-        (paramStringNumber - 1) * stringSpacing -
-        stringBaseWidth / 2;
       posY = 0;
-      endX =
+      endX = stringBaseWidth + (stringCount - (paramStringNumber - 1)) * stringWidthFactor;
-        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 +
+      stringIndent + (stringCount - paramMarker.string) * stringSpacing + strokeWidth * 0.5;
-      (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 =
+      posX = stringIndent + (paramMarker.string - 1) * stringSpacing + strokeWidth * 0.5;
-        stringIndent +
-        (paramMarker.string - 1) * stringSpacing +
-        strokeWidth * 0.5;
       [posX, posY] = [posY, posX];
     }
 
-    const boundingRect = this.shadowRoot
+    const boundingRect = this.shadowRoot.querySelector("canvas").getBoundingClientRect();
-      .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.#docRoot.getElementById(this.#config.canvasID + "-change-orientation-button")
-          this.#config.canvasID + "-change-orientation-button",
-        )
       ) {
         let changeOrientationButton = this.#docRoot.createElement("input");
 
         changeOrientationButton.type = "button";
-        changeOrientationButton.id =
+        changeOrientationButton.id = this.#config.canvasID + "-change-orientation-button";
-          this.#config.canvasID + "-change-orientation-button";
         changeOrientationButton.style = "margin: " + controlMargins + ";";
-        changeOrientationButton.classList.add(
+        changeOrientationButton.classList.add(controlClassPrefix + "change-orientation-button");
-          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.#docRoot.getElementById(this.#config.canvasID + "-download-image-button")
-          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(
+        downloadButton.classList.add(controlClassPrefix + "download-image-button");
-          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 =
+    let fretboardWidth = this.#config.stringNames.length * stringSpacing + stringIndent / 2;
-      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 =
+      marker.shape = paramShape == null ? GuitarDiagramsWebComponent.Shape.Circle : paramShape;
-        paramShape == null
-          ? GuitarDiagramsWebComponent.Shape.Circle
-          : paramShape;
       marker.eventCallbacks = callbacks == null ? new Map() : callbacks;
 
       if (playSound) {
         marker.eventCallbacks.set("click", (elem) => {
-          this.#outputSpeaker.triggerAttackRelease(
+          this.#outputSpeaker.triggerAttackRelease(this.markerToNoteFrequency(marker), "2n");
-            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.posX - mouseX, 2) + Math.pow(marker.posY - mouseY, 2) <
-                  Math.pow(marker.posY - mouseY, 2) <
+                Math.pow(GuitarDiagramsWebComponent.markerRadius * this.#config.scaleFactor, 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.posX - mouseX, 2) + Math.pow(marker.posY - mouseY, 2) <
-                  Math.pow(marker.posY - mouseY, 2) <
+                Math.pow(GuitarDiagramsWebComponent.markerRadius * this.#config.scaleFactor, 2)
-                Math.pow(
-                  GuitarDiagramsWebComponent.markerRadius *
-                    this.#config.scaleFactor,
-                  2,
-                )
               ) {
                 cursorPointer = true;
-                const canvas = this.shadowRoot
+                const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
-                  .querySelector("canvas")
-                  .getContext("2d");
                 canvas.beginPath();
                 canvas.fillStyle = "yellow";
-                this.#drawMarkerCircle(
+                this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
-                  marker.relativePosX,
-                  marker.relativePosY,
-                );
                 canvas.closePath();
               } else {
-                const canvas = this.shadowRoot
+                const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
-                  .querySelector("canvas")
-                  .getContext("2d");
                 canvas.beginPath();
                 canvas.fillStyle = marker.colorFill;
-                this.#drawMarkerCircle(
+                this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
-                  marker.relativePosX,
-                  marker.relativePosY,
-                );
                 canvas.closePath();
               }
             }
@@ -857,9 +846,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
   }
 
   playAllMarkers() {
-    let allNoteFrequencies = this.#markers.map((marker) =>
+    let allNoteFrequencies = this.#markers.map((marker) => this.markerToNoteFrequency(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;
   }