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

js/src/Tonejs-Instruments.js

@@ -0,0 +1,635 @@
+/**
+ * @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": "Ds3.[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
@@ -97,6 +97,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,6 +131,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       );
     });
 
+    if (markerList.length > 0 && this.getAttribute("show-chord") == "true") {
       let chordsButton = document.createElement("button");
       const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
       chordsButton.setAttribute(
@@ -120,12 +141,19 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       chordsButton.innerHTML = "Play chord";
 
       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",
+      "center-align",
+    ];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -142,6 +170,26 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       case "scale-factor":
         this.#config.scaleFactor = 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();
@@ -173,7 +221,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       [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;
@@ -323,6 +378,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
 
         this.#drawFretMarker(2);
         this.#drawFretMarker(4);
+        this.#drawFretMarker(6);
       }
     }
   }