vue-audio-ui 0.1.0

package/dist/v-audio-ui.js

@@ -0,0 +1,1189 @@
+import { defineComponent as w, resolveComponent as G, createElementBlock as p, openBlock as c, createVNode as k, ref as y, watch as W, computed as H, onMounted as I, onUnmounted as R, createStaticVNode as V, createElementVNode as n, Fragment as O, normalizeStyle as S, toDisplayString as m, renderSlot as U, reactive as F, normalizeClass as L } from "vue";
+const N = w({
+  name: "VAAnalogMeterStereo",
+  props: {
+    leftInput: {
+      required: !1,
+      type: AudioNode
+    },
+    rightInput: {
+      required: !1,
+      type: AudioNode
+    },
+    type: {
+      required: !1,
+      type: String,
+      default: "peak"
+    },
+    fftSize: {
+      required: !1,
+      type: Number,
+      default: 2048
+    },
+    width: {
+      required: !1,
+      type: Number,
+      default: 300
+    }
+  }
+}), u = (t, e) => {
+  const a = t.__vccOpts || t;
+  for (const [r, i] of e)
+    a[r] = i;
+  return a;
+}, E = { class: "stereo-meter-container" };
+function B(t, e, a, r, i, s) {
+  const o = G("v-a-analog-meter");
+  return c(), p("div", E, [
+    k(o, {
+      class: "meter-channel",
+      input: t.leftInput,
+      fftSize: t.fftSize,
+      type: t.type,
+      width: t.width
+    }, null, 8, ["input", "fftSize", "type", "width"]),
+    k(o, {
+      class: "meter-channel",
+      input: t.rightInput,
+      fftSize: t.fftSize,
+      type: t.type,
+      width: t.width
+    }, null, 8, ["input", "fftSize", "type", "width"])
+  ]);
+}
+const _ = /* @__PURE__ */ u(N, [["render", B], ["__scopeId", "data-v-b2b883c7"]]);
+function T(t, e) {
+  let a, r;
+  e && i(e);
+  function i(l) {
+    a = l.context.createAnalyser(), a.fftSize = t, r = new Float32Array(a.frequencyBinCount), l.connect(a);
+  }
+  function s(l, d) {
+    l && i(l);
+  }
+  function o() {
+    return a?.getFloatTimeDomainData(r), r;
+  }
+  function h() {
+    return a?.getFloatFrequencyData(r), r;
+  }
+  function g(l) {
+    let d = 0, f;
+    for (let x = 0; x < l.length; x++)
+      f = Math.abs(l[x]), f > d && (d = f);
+    return 20 * Math.log10(d);
+  }
+  function D(l) {
+    let d = 0, f;
+    for (let x = 0; x < l.length; x++)
+      f = Math.abs(l[x]), d += f * f;
+    return 20 * Math.log10(Math.sqrt(d / l.length));
+  }
+  return {
+    getPeakDb: g,
+    getRmsDb: D,
+    getFloatTimeDomainData: o,
+    getFloatFrequencyData: h,
+    onInputChanged: s
+  };
+}
+function P() {
+  const t = y(!1);
+  function e(i) {
+    try {
+      i();
+    } catch (s) {
+      t.value = !1, console.log(`error in render callback - ${s}`);
+    }
+    t.value && window.requestAnimationFrame(() => e(i));
+  }
+  function a(i) {
+    t.value = !0, e(i);
+  }
+  function r() {
+    t.value = !1;
+  }
+  return { startRendering: a, stopRendering: r };
+}
+const Y = w({
+  name: "VAAnalogMeter",
+  props: {
+    input: {
+      required: !1,
+      type: AudioNode,
+      default: void 0
+    },
+    type: {
+      required: !1,
+      type: String,
+      default: "peak"
+    },
+    fftSize: {
+      required: !1,
+      type: Number,
+      default: 2048
+    },
+    width: {
+      required: !1,
+      type: Number,
+      default: 300
+    }
+  },
+  setup(t) {
+    const { getPeakDb: e, getRmsDb: a, getFloatTimeDomainData: r, onInputChanged: i } = T(t.fftSize, t.input);
+    W(() => t.input, i);
+    const { startRendering: s, stopRendering: o } = P(), h = y(-1), g = y("black"), D = H(() => isNaN(h.value) ? "rotate(0 160 150)" : `rotate(${50 * h.value} 160 150)`);
+    return I(() => {
+      s(() => {
+        const l = r();
+        let d = 0;
+        t.type === "peak" && l ? d = e(l) : t.type === "rms" && l && (d = a(l));
+        const f = 80;
+        d = d < -f ? -f : d;
+        const x = (f + d) / f;
+        h.value = x * 2 - 1;
+      });
+    }), R(() => {
+      o();
+    }), {
+      color: g,
+      rotation: D,
+      value: h
+    };
+  }
+}), K = { class: "meter-container" }, X = ["width"], Z = ["transform"];
+function j(t, e, a, r, i, s) {
+  return c(), p("div", K, [
+    (c(), p("svg", {
+      width: `${t.width}px`,
+      viewBox: "0 0 320 220",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, [
+      e[1] || (e[1] = V('<defs data-v-a00b48f0><linearGradient id="frameGrad" x1="0" y1="0" x2="0" y2="1" data-v-a00b48f0><stop offset="0%" stop-color="#f0f0f0" data-v-a00b48f0></stop><stop offset="50%" stop-color="#b5b5b5" data-v-a00b48f0></stop><stop offset="100%" stop-color="#8a8a8a" data-v-a00b48f0></stop></linearGradient><linearGradient id="faceGrad" x1="0" y1="0" x2="0" y2="1" data-v-a00b48f0><stop offset="0%" stop-color="#fffdf7" data-v-a00b48f0></stop><stop offset="100%" stop-color="#e9e2d3" data-v-a00b48f0></stop></linearGradient><radialGradient id="glassGrad" cx="50%" cy="0%" r="80%" data-v-a00b48f0><stop offset="0%" stop-color="white" stop-opacity="0.7" data-v-a00b48f0></stop><stop offset="60%" stop-color="white" stop-opacity="0.15" data-v-a00b48f0></stop><stop offset="100%" stop-color="white" stop-opacity="0" data-v-a00b48f0></stop></radialGradient><filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" data-v-a00b48f0><feDropShadow dx="0" dy="3" stdDeviation="4" flood-opacity="0.4" data-v-a00b48f0></feDropShadow></filter><filter id="needleShadow" data-v-a00b48f0><feDropShadow dx="1" dy="1" stdDeviation="1" flood-opacity="0.5" data-v-a00b48f0></feDropShadow></filter></defs><rect x="10" y="10" rx="18" ry="18" width="300" height="200" fill="url(#frameGrad)" filter="url(#shadow)" data-v-a00b48f0></rect><rect x="24" y="24" rx="12" ry="12" width="272" height="172" fill="url(#faceGrad)" stroke="#777" stroke-width="1" data-v-a00b48f0></rect><path d="M 60 90 A 130 70 0 0 1 260 90" fill="none" stroke="#222" stroke-width="2" data-v-a00b48f0></path><g stroke="#222" stroke-width="2" data-v-a00b48f0><line x1="100" y1="120" x2="105" y2="130" data-v-a00b48f0></line><line x1="160" y1="110" x2="160" y2="122" data-v-a00b48f0></line><line x1="220" y1="120" x2="215" y2="130" data-v-a00b48f0></line></g>', 5)),
+      n("g", {
+        id: "needle",
+        transform: t.rotation
+      }, [...e[0] || (e[0] = [
+        n("polygon", {
+          points: "160,70 158,150 162,150",
+          fill: "#c62828"
+        }, null, -1),
+        n("circle", {
+          cx: "160",
+          cy: "150",
+          r: "6",
+          fill: "#333"
+        }, null, -1),
+        n("circle", {
+          cx: "160",
+          cy: "150",
+          r: "3",
+          fill: "#777"
+        }, null, -1)
+      ])], 8, Z),
+      e[2] || (e[2] = n("rect", {
+        x: "24",
+        y: "24",
+        rx: "12",
+        ry: "12",
+        width: "272",
+        height: "172",
+        fill: "url(#glassGrad)"
+      }, null, -1)),
+      e[3] || (e[3] = n("text", {
+        x: "160",
+        y: "185",
+        "text-anchor": "middle",
+        "font-size": "16",
+        "font-weight": "bold",
+        "font-family": "Arial, Helvetica, sans-serif",
+        fill: "#333"
+      }, null, -1))
+    ], 8, X))
+  ]);
+}
+const J = /* @__PURE__ */ u(Y, [["render", j], ["__scopeId", "data-v-a00b48f0"]]);
+function z(t, e, a) {
+  return t < e ? e : t > a ? a : t;
+}
+class A {
+  min;
+  max;
+  constructor(e, a) {
+    this.min = e, this.max = a;
+  }
+  getCurvedValue(e) {
+    throw "getCurvedValue must be overriden in child class";
+  }
+  getLinearValue(e) {
+    throw "getLinearValue must be overriden in child class";
+  }
+  validateInput(e) {
+    if (e < this.min)
+      throw `given value ${e} is less than min value ${this.min}`;
+    if (e > this.max)
+      throw `given value ${e} is greater than max value ${this.max}`;
+  }
+}
+function $(t) {
+  return Math.pow(Math.E, t);
+}
+function Q(t, e, a, r, i, s) {
+  return ($(((t - e) / (a - e) - 1) * s) - 1) / ($(-s) - 1) * (r - i) + i;
+}
+function tt(t, e, a, r, i, s) {
+  return (Math.log((t - i) * ($(-s) - 1) / (r - i) + 1) / s + 1) * (a - e) + e;
+}
+class q extends A {
+  curveAmount;
+  constructor(e, a, r) {
+    super(e, a), this.curveAmount = r;
+  }
+  getCurvedValue(e) {
+    return this.validateInput(e), Q(e, this.min, this.max, this.min, this.max, this.curveAmount);
+  }
+  getLinearValue(e) {
+    return this.validateInput(e), tt(e, this.min, this.max, this.min, this.max, this.curveAmount);
+  }
+}
+class M extends A {
+  constructor(e, a) {
+    super(e, a);
+  }
+  getCurvedValue(e) {
+    return this.validateInput(e), e;
+  }
+  getLinearValue(e) {
+    return this.validateInput(e), e;
+  }
+}
+const et = 3, at = 300, rt = w({
+  name: "VAAudioFileVisualizer",
+  data() {
+    return {
+      canvas: null,
+      canvasContext: null,
+      amplitudeData: new Float32Array(),
+      markerPosition: 0,
+      markerIndex: 0,
+      zoomWindowStartIndex: 0,
+      zoomWindowEndIndex: 0,
+      zoom: 1,
+      prevY: -1,
+      prevX: -1,
+      curedRange: new q(0, 1, 8)
+      // todo: adjust curve based on sample length?,
+    };
+  },
+  props: {
+    lineColor: {
+      required: !1,
+      type: String,
+      default: "white"
+    },
+    backgroundColor: {
+      required: !1,
+      type: String,
+      default: "black"
+    },
+    width: {
+      required: !1,
+      type: Number,
+      default: 800
+    },
+    height: {
+      required: !1,
+      type: Number,
+      default: -1
+    }
+  },
+  computed: {
+    cssVars() {
+      return {
+        "--line-color": `${this.lineColor}`,
+        "--background-color": `${this.backgroundColor}`
+      };
+    },
+    graphWidth() {
+      return this.width;
+    },
+    graphHeight() {
+      return this.width / et;
+    },
+    zoomMult() {
+      const t = this.curedRange.getCurvedValue(this.zoom);
+      return Math.max(t, 16 / this.amplitudeData.length);
+    },
+    zoomWindowLength() {
+      return this.zoomWindowEndIndex - this.zoomWindowStartIndex;
+    }
+  },
+  mounted() {
+    this.canvas = this.$refs.visualizer, this.canvasContext = this.canvas.getContext("2d");
+  },
+  methods: {
+    loadAudioFromAmplitudeData(t) {
+      this.amplitudeData = t, window.requestAnimationFrame(this.drawZoom);
+    },
+    shiftZoomWindow(t) {
+      this.zoomWindowStartIndex += t, this.zoomWindowEndIndex += t;
+    },
+    setZoomWindow() {
+      this.zoomWindowStartIndex = this.markerIndex - Math.round(this.amplitudeData.length * this.zoomMult / 2), this.zoomWindowEndIndex = this.markerIndex + Math.round(this.amplitudeData.length * this.zoomMult / 2);
+      const e = (this.graphWidth / 2 - this.markerPosition) / this.graphWidth, a = Math.round(
+        e * this.zoomWindowLength
+      );
+      this.shiftZoomWindow(a);
+      let r = 0;
+      r += this.zoomWindowStartIndex < 0 ? -this.zoomWindowStartIndex : 0, r += this.zoomWindowEndIndex > this.amplitudeData.length ? this.amplitudeData.length - this.zoomWindowEndIndex : 0, this.shiftZoomWindow(r);
+    },
+    drawZoom() {
+      this.setZoomWindow(), this.drawAmplitude();
+    },
+    getMaxSampleValue(t, e, a) {
+      let r = Number.MIN_VALUE;
+      for (let i = e; i < a; i++)
+        r = Math.max(r, t[i]);
+      return r;
+    },
+    getMinSampleValue(t, e, a) {
+      let r = Number.MAX_VALUE;
+      for (let i = e; i < a; i++)
+        r = Math.min(r, t[i]);
+      return r;
+    },
+    getAvgSampleValue(t, e, a) {
+      let r = 0;
+      for (let i = e; i < a; i++)
+        r += Math.abs(t[i]);
+      return r / (a - e);
+    },
+    drawAmplitudeSamples() {
+      const t = Math.max(
+        Math.ceil(this.zoomWindowLength / this.graphWidth),
+        1
+      ), e = this.graphWidth / (this.zoomWindowEndIndex - this.zoomWindowStartIndex);
+      this.canvasContext?.clearRect(0, 0, this.graphWidth, this.graphHeight), this.canvasContext.fillStyle = this.backgroundColor, this.canvasContext?.fillRect(0, 0, this.graphWidth, this.graphHeight), this.canvasContext.strokeStyle = this.lineColor, this.canvasContext?.beginPath();
+      let a = 0, r = 0, i = 0;
+      for (let s = this.zoomWindowStartIndex; s < this.zoomWindowEndIndex; s += t)
+        i = this.amplitudeData[s], a = (s - this.zoomWindowStartIndex) * e, r = this.graphHeight - (this.graphHeight / 2 + i * this.graphHeight / 2), this.canvasContext?.lineTo(a, r);
+      this.canvasContext?.lineTo(this.graphWidth, this.graphHeight / 2), this.canvasContext?.stroke(), this.canvasContext?.beginPath(), this.canvasContext.strokeStyle = "red", this.canvasContext?.moveTo(this.markerPosition, 0), this.canvasContext?.lineTo(this.markerPosition, this.graphHeight), this.canvasContext?.stroke();
+    },
+    drawAmplitudeAvg() {
+      const t = Math.max(
+        Math.floor(this.zoomWindowLength / this.graphWidth),
+        1
+      );
+      this.canvasContext?.clearRect(0, 0, this.graphWidth, this.graphHeight), this.canvasContext.fillStyle = this.backgroundColor, this.canvasContext?.fillRect(0, 0, this.graphWidth, this.graphHeight), this.canvasContext.strokeStyle = this.lineColor, this.canvasContext?.beginPath();
+      let e = 0, a = 0, r = 0;
+      for (let i = 0; i < this.graphWidth; i++)
+        e = i, r = this.getAvgSampleValue(
+          this.amplitudeData,
+          this.zoomWindowStartIndex + i * t,
+          this.zoomWindowStartIndex + (i + 1) * t
+        ), a = this.graphHeight - (this.graphHeight / 2 + r * this.graphHeight / 2), this.canvasContext?.moveTo(e, a), a = this.graphHeight - (this.graphHeight / 2 + -r * this.graphHeight / 2), this.canvasContext?.lineTo(e, a);
+      this.canvasContext?.lineTo(this.graphWidth, this.graphHeight / 2), this.canvasContext?.stroke(), this.canvasContext?.beginPath(), this.canvasContext.strokeStyle = "red", this.canvasContext?.moveTo(this.markerPosition, 0), this.canvasContext?.lineTo(this.markerPosition, this.graphHeight), this.canvasContext?.stroke();
+    },
+    drawAmplitudeMinMax() {
+      const t = Math.max(
+        Math.floor(this.zoomWindowLength / this.graphWidth),
+        1
+      );
+      this.canvasContext?.clearRect(0, 0, this.graphWidth, this.graphHeight), this.canvasContext.fillStyle = this.backgroundColor, this.canvasContext?.fillRect(0, 0, this.graphWidth, this.graphHeight), this.canvasContext.strokeStyle = this.lineColor, this.canvasContext?.beginPath();
+      let e = 0, a = 0, r = 0, i = 0;
+      for (let s = 0; s < this.graphWidth; s++)
+        e = s, r = this.getMinSampleValue(
+          this.amplitudeData,
+          this.zoomWindowStartIndex + s * t,
+          this.zoomWindowStartIndex + (s + 1) * t
+        ), i = this.getMaxSampleValue(
+          this.amplitudeData,
+          this.zoomWindowStartIndex + s * t,
+          this.zoomWindowStartIndex + (s + 1) * t
+        ), a = this.graphHeight - (this.graphHeight / 2 + r * this.graphHeight / 2), this.canvasContext?.moveTo(e, a), a = this.graphHeight - (this.graphHeight / 2 + i * this.graphHeight / 2), this.canvasContext?.lineTo(e, a);
+      this.canvasContext?.lineTo(this.graphWidth, this.graphHeight / 2), this.canvasContext?.stroke(), this.canvasContext?.beginPath(), this.canvasContext.strokeStyle = "red", this.canvasContext?.moveTo(this.markerPosition, 0), this.canvasContext?.lineTo(this.markerPosition, this.graphHeight), this.canvasContext?.stroke();
+    },
+    drawAmplitude() {
+      this.zoomWindowLength > this.graphWidth ? this.drawAmplitudeAvg() : this.drawAmplitudeSamples();
+    },
+    onCanvasDoubleClick() {
+      this.markerIndex = 0, this.markerPosition = 0, this.zoom = 1, this.zoomWindowStartIndex = 0, this.zoomWindowEndIndex = this.amplitudeData.length;
+    },
+    onCanvasMouseDown(t) {
+      document.getElementsByTagName("body")[0].classList.add("--no-text-select");
+      const e = this.canvas?.getBoundingClientRect()?.x, a = t.clientX - e;
+      this.markerIndex = Math.round(a / this.graphWidth * this.zoomWindowLength) + this.zoomWindowStartIndex, this.markerPosition = a, window.requestAnimationFrame(this.drawAmplitude), window.addEventListener("mousemove", this.onClickDrag), window.addEventListener("mouseup", this.endDrag);
+    },
+    endDrag() {
+      window.removeEventListener("mousemove", this.onClickDrag), this.prevY = -1, this.prevX = -1, document.getElementsByTagName("body")[0].classList.remove("--no-text-select");
+    },
+    onClickDrag(t) {
+      const e = t.pageY, a = t.pageX, r = a - this.prevX, i = e - this.prevY;
+      if (Math.abs(r) >= Math.abs(i)) {
+        if (this.prevX >= 0) {
+          let s = Math.round(
+            r / this.graphWidth * this.zoomWindowLength
+          );
+          const o = -this.zoomWindowStartIndex, h = this.amplitudeData.length - this.zoomWindowEndIndex;
+          s = z(s, o, h), this.shiftZoomWindow(-s), this.markerIndex -= s;
+        }
+      } else
+        this.prevY >= 0 && (this.zoom = z(this.zoom - i / at * 1, 0, 1), this.setZoomWindow());
+      this.markerPosition = Math.round(
+        (this.markerIndex - this.zoomWindowStartIndex) / this.zoomWindowLength * this.graphWidth
+      ), window.requestAnimationFrame(this.drawAmplitude), this.prevY = e, this.prevX = a;
+    }
+  }
+}), it = ["width", "height"];
+function st(t, e, a, r, i, s) {
+  return c(), p(O, null, [
+    n("canvas", {
+      width: t.graphWidth,
+      height: t.graphHeight,
+      ref: "visualizer",
+      class: "visualizer-canvas",
+      style: S(t.cssVars),
+      onMousedown: e[0] || (e[0] = (...o) => t.onCanvasMouseDown && t.onCanvasMouseDown(...o)),
+      onDblclick: e[1] || (e[1] = (...o) => t.onCanvasDoubleClick && t.onCanvasDoubleClick(...o))
+    }, null, 44, it),
+    n("p", null, "zoom: " + m(t.zoom), 1),
+    n("p", null, "zoomWindowStartIndex: " + m(t.zoomWindowStartIndex), 1),
+    n("p", null, "zoomWindowEndIndex: " + m(t.zoomWindowEndIndex), 1),
+    n("p", null, "zoomWindowLength: " + m(t.zoomWindowLength), 1),
+    n("p", null, "totalSamples: " + m(t.amplitudeData.length), 1),
+    n("p", null, "markerIndex: " + m(t.markerIndex), 1),
+    n("p", null, "markerPosition: " + m(t.markerPosition), 1),
+    n("p", null, "graphWidth: " + m(t.graphWidth), 1),
+    n("p", null, " binSize: " + m(Math.max(Math.floor(t.zoomWindowLength / t.graphWidth), 1)), 1),
+    n("p", null, " binSize (raw): " + m(Math.max(t.zoomWindowLength / t.graphWidth, 1)), 1)
+  ], 64);
+}
+const ot = /* @__PURE__ */ u(rt, [["render", st], ["__scopeId", "data-v-41d0c9ce"]]), nt = w({
+  name: "VADigitalMeterStereo",
+  props: {
+    leftInput: {
+      required: !1,
+      type: AudioNode
+    },
+    rightInput: {
+      required: !1,
+      type: AudioNode
+    },
+    type: {
+      required: !1,
+      type: String,
+      default: "peak"
+    },
+    fftSize: {
+      required: !1,
+      type: Number,
+      default: 2048
+    },
+    clippingColor: {
+      required: !1,
+      type: String,
+      default: "#e64a19"
+    },
+    barColor: {
+      required: !1,
+      type: String,
+      default: "#4caf50"
+    },
+    backgroundColor: {
+      required: !1,
+      type: String,
+      default: "#e0e0e0"
+    },
+    markerColor: {
+      required: !1,
+      type: String,
+      default: "gray"
+    },
+    drawMarkers: {
+      required: !1,
+      type: Boolean,
+      default: !1
+    },
+    height: {
+      required: !1,
+      type: Number,
+      default: 200
+    },
+    width: {
+      required: !1,
+      type: Number,
+      default: 20
+    },
+    font: {
+      required: !1,
+      type: String,
+      default: "Helvetica, sans-serif"
+    }
+  }
+}), ht = { class: "stereo-meter-container" };
+function lt(t, e, a, r, i, s) {
+  const o = G("v-a-digital-meter");
+  return c(), p("div", ht, [
+    k(o, {
+      class: "meter-channel",
+      input: t.leftInput,
+      fftSize: t.fftSize,
+      type: t.type,
+      height: t.height,
+      width: t.width,
+      barColor: t.barColor,
+      backgroundColor: t.backgroundColor,
+      markerColor: t.markerColor,
+      font: t.font,
+      clippingColor: t.clippingColor,
+      drawMarkers: !1
+    }, null, 8, ["input", "fftSize", "type", "height", "width", "barColor", "backgroundColor", "markerColor", "font", "clippingColor"]),
+    k(o, {
+      class: "meter-channel",
+      input: t.rightInput,
+      fftSize: t.fftSize,
+      type: t.type,
+      height: t.height,
+      width: t.width,
+      barColor: t.barColor,
+      backgroundColor: t.backgroundColor,
+      markerColor: t.markerColor,
+      font: t.font,
+      clippingColor: t.clippingColor,
+      drawMarkers: t.drawMarkers
+    }, null, 8, ["input", "fftSize", "type", "height", "width", "barColor", "backgroundColor", "markerColor", "font", "clippingColor", "drawMarkers"])
+  ]);
+}
+const dt = /* @__PURE__ */ u(nt, [["render", lt], ["__scopeId", "data-v-0ed3d04a"]]), v = 90, pt = new q(0, v, 2), ct = w({
+  name: "VADigitalMeter",
+  props: {
+    input: {
+      required: !1,
+      type: AudioNode,
+      default: void 0
+    },
+    type: {
+      required: !1,
+      type: String,
+      default: "peak"
+    },
+    fftSize: {
+      required: !1,
+      type: Number,
+      default: 2048
+    },
+    clippingColor: {
+      required: !1,
+      type: String,
+      default: "#e64a19"
+    },
+    barColor: {
+      required: !1,
+      type: String,
+      default: "#4caf50"
+    },
+    backgroundColor: {
+      required: !1,
+      type: String,
+      default: "#e0e0e0"
+    },
+    markerColor: {
+      required: !1,
+      type: String,
+      default: "gray"
+    },
+    drawMarkers: {
+      required: !1,
+      type: Boolean,
+      default: !1
+    },
+    height: {
+      required: !1,
+      type: Number,
+      default: 200
+    },
+    width: {
+      required: !1,
+      type: Number,
+      default: 20
+    },
+    font: {
+      required: !1,
+      type: String,
+      default: "Helvetica, sans-serif"
+    }
+  },
+  computed: {
+    canvasWidth() {
+      return this.width + (this.drawMarkers ? 30 : 0);
+    }
+  },
+  setup(t) {
+    const e = T(t.fftSize, t.input);
+    return W(() => t.input, e.onInputChanged), {
+      ...e,
+      ...P()
+    };
+  },
+  data() {
+    return {
+      canvasCxt: null
+    };
+  },
+  mounted() {
+    const t = this.$refs.meterCanvas;
+    this.canvasCxt = t.getContext("2d"), this.startRendering(this.draw);
+  },
+  methods: {
+    getMeterHeight(t) {
+      return this.height * ((v + t) / v) * (v / (v + 10));
+    },
+    scaleY(t) {
+      return pt.getCurvedValue(t + v) - v;
+    },
+    draw() {
+      if (this.canvasCxt) {
+        const t = this.getFloatTimeDomainData();
+        let e = -v;
+        this.type === "peak" && t ? e = this.getPeakDb(t) : this.type === "rms" && t && (e = this.getRmsDb(t));
+        const a = e > 0;
+        e = z(e, -v, 0);
+        const r = this.getMeterHeight(this.scaleY(e));
+        this.canvasCxt.clearRect(0, 0, this.canvasWidth, this.height), this.canvasCxt.fillStyle = this.backgroundColor, this.canvasCxt.beginPath(), this.canvasCxt.fillRect(0, 0, this.width, this.height), this.canvasCxt.stroke(), this.canvasCxt.fillStyle = a ? this.clippingColor : this.barColor, this.canvasCxt.beginPath(), this.canvasCxt.fillRect(
+          0,
+          this.height - r,
+          this.width,
+          r
+        ), this.canvasCxt.stroke(), this.drawMarkers && this.drawDbMarkers();
+      }
+    },
+    drawDbMarkers() {
+      this.drawDbMarker(0), this.drawDbMarker(-10), this.drawDbMarker(-20), this.drawDbMarker(-30), this.drawDbMarker(-40), this.drawDbMarker(-60);
+    },
+    drawDbMarker(t) {
+      const e = this.height - this.getMeterHeight(this.scaleY(t)), a = this.width + 4;
+      this.canvasCxt.lineWidth = 1, this.canvasCxt.strokeStyle = this.markerColor, this.canvasCxt?.beginPath(), this.canvasCxt?.moveTo(a, e), this.canvasCxt?.lineTo(a + 4, e), this.canvasCxt?.stroke(), this.canvasCxt.font = `10px ${this.font}`, this.canvasCxt.fillStyle = this.markerColor, this.canvasCxt.fillText(`${Math.abs(t)}`, a + 8, e + 3);
+    }
+  }
+}), ft = ["height", "width"];
+function ut(t, e, a, r, i, s) {
+  return c(), p("canvas", {
+    class: "meter",
+    ref: "meterCanvas",
+    height: t.height,
+    width: t.canvasWidth
+  }, null, 8, ft);
+}
+const mt = /* @__PURE__ */ u(ct, [["render", ut]]), gt = {}, yt = {
+  version: "1.1",
+  viewBox: "0 0 62.143 129.29",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "27"
+};
+function xt(t, e) {
+  return c(), p("svg", yt, [...e[0] || (e[0] = [
+    V('<defs><filter id="filter4165" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><filter id="filter4165-1" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><filter id="filter4165-4" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><linearGradient id="linearGradient7341" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(406.7,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7468" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(203.35,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7595" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(0,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7698" x1="87.866" x2="87.866" y1="516.83" y2="528.75" gradientTransform="matrix(1.0278,0,0,1,582.85,121.43)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#999" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7700" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0235,0,0,1,37.712,-1157.9)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7702" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .50643 51.792 414.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7704" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .42746 51.792 466.71)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7706" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .26952 51.792 554.43)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7708" x1="87.866" x2="87.866" y1="516.83" y2="521.42" gradientTransform="matrix(1.0364 0 0 .96441 581.97 -1263.8)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient id="linearGradient7710" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0364 0 0 .96441 29.714 -1226.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7712" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0274 0 0 .48841 35.581 -982.83)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7714" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0213 0 0 .41225 39.183 -932.97)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7716" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0122 0 0 .25993 44.587 -848)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient></defs><g transform="translate(-642.36 -637.36)"><rect x="642.36" y="637.36" width="62.143" height="129.29" rx="3" ry="3" fill="#4d4d4d"></rect><rect x="643.3" y="701.75" width="60.419" height="3.5355" fill="#e6e6e6"></rect><rect x="643.05" y="638.08" width="60.613" height="21.071" rx="2.1483" ry="2" fill="url(#linearGradient7698)"></rect><rect x="643.25" y="689.59" width="58.811" height="10.119" fill="#333"></rect><rect x="642.36" y="680.23" width="61.133" height="8.7929" fill="#333"></rect><rect x="642.36" y="661.81" width="61.133" height="4.5457" fill="#1a1a1a"></rect><rect x="642.36" y="667.58" width="61.133" height="11.364" fill="#1a1a1a"></rect><rect transform="scale(1,-1)" x="643.05" y="-661.09" width="60.012" height="2.2612" rx="1.0235" ry=".63958" fill="url(#linearGradient7700)"></rect><rect x="643.22" y="666.37" width="58.633" height="1.1452" rx="1" ry=".3239" fill="url(#linearGradient7702)"></rect><rect x="643.22" y="679.09" width="58.633" height=".9666" rx="1" ry=".2734" fill="url(#linearGradient7704)"></rect><rect x="643.22" y="688.34" width="58.633" height=".60946" rx="1" ry=".17238" fill="url(#linearGradient7706)"></rect><rect transform="scale(1,-1)" x="642.67" y="-765.57" width="61.118" height="20.321" rx="2.1662" ry="1.9288" fill="url(#linearGradient7708)"></rect><rect transform="scale(1,-1)" x="643.25" y="-717.26" width="58.811" height="9.7593" fill="#333"></rect><rect transform="scale(1,-1)" x="642.36" y="-726.3" width="61.133" height="8.4799" fill="#666"></rect><rect transform="scale(1,-1)" x="642.36" y="-744.06" width="61.133" height="4.3839" fill="#808080"></rect><rect transform="scale(1,-1)" x="642.36" y="-738.49" width="61.133" height="10.96" fill="#808080"></rect><rect transform="scale(1,-1)" x="642.67" y="-746.93" width="60.767" height="2.1808" rx="1.0364" ry=".61681" fill="url(#linearGradient7710)"></rect><rect transform="scale(1,-1)" x="643.22" y="-740.17" width="60.24" height="1.1044" rx="1.0274" ry=".31237" fill="url(#linearGradient7712)"></rect><rect transform="scale(1,-1)" x="643.22" y="-728.15" width="59.883" height=".9322" rx="1.0213" ry=".26366" fill="url(#linearGradient7714)"></rect><rect transform="scale(1,-1)" x="643.22" y="-718.85" width="59.347" height=".58776" rx="1.0122" ry=".16624" fill="url(#linearGradient7716)"></rect></g>', 2)
+  ])]);
+}
+const vt = /* @__PURE__ */ u(gt, [["render", xt]]), wt = {}, kt = {
+  version: "1.1",
+  viewBox: "0 0 104 460",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function bt(t, e) {
+  return c(), p("svg", kt, [...e[0] || (e[0] = [
+    V('<defs><filter id="filter4165" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><filter id="filter4165-1" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><filter id="filter4165-4" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><linearGradient id="linearGradient7341" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(406.7,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7468" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(203.35,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7595" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(0,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7698" x1="87.866" x2="87.866" y1="516.83" y2="528.75" gradientTransform="matrix(1.0278,0,0,1,582.85,121.43)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#999" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7700" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0235,0,0,1,37.712,-1157.9)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7702" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .50643 51.792 414.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7704" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .42746 51.792 466.71)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7706" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .26952 51.792 554.43)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7708" x1="87.866" x2="87.866" y1="516.83" y2="521.42" gradientTransform="matrix(1.0364 0 0 .96441 581.97 -1263.8)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient id="linearGradient7710" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0364 0 0 .96441 29.714 -1226.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7712" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0274 0 0 .48841 35.581 -982.83)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7714" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0213 0 0 .41225 39.183 -932.97)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7716" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0122 0 0 .25993 44.587 -848)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7718" x1="87.866" x2="87.866" y1="516.83" y2="528.75" gradientTransform="matrix(1.0278,0,0,1,787.52,-27.904)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#999" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7720" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0235,0,0,1,242.38,-1008.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7722" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .50643 256.46 265.42)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7724" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .42746 256.46 317.38)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7726" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .26952 256.46 405.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7728" x1="87.866" x2="87.866" y1="516.83" y2="521.42" gradientTransform="matrix(1.0364 0 0 .96441 786.64 -1114.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient id="linearGradient7730" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0364 0 0 .96441 234.39 -1076.7)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7732" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0274 0 0 .48841 240.25 -833.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7734" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0213 0 0 .41225 243.85 -783.64)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7736" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0122 0 0 .25993 249.26 -698.66)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7738" x1="87.866" x2="87.866" y1="516.83" y2="528.75" gradientTransform="matrix(1.0278,0,0,1,989.55,-112.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#999" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7740" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0235,0,0,1,444.41,-923.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7742" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .50643 458.49 180.57)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7744" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .42746 458.49 232.53)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7746" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .26952 458.49 320.25)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7748" x1="87.866" x2="87.866" y1="516.83" y2="521.42" gradientTransform="matrix(1.0364 0 0 .96441 988.67 -1029.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient id="linearGradient7750" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0364 0 0 .96441 436.42 -991.9)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7752" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0274 0 0 .48841 442.28 -748.65)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7754" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0213 0 0 .41225 445.88 -698.79)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7756" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0122 0 0 .25993 451.29 -613.82)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><clipPath id="clipPath1318"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1322"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1326"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1330"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1334"><rect x="211.98" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1338"><rect x="620" y="321.05" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1342"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1346"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1350"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1354"><rect x="415.33" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1358"><rect x="415.33" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1362"><rect x="618.68" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1366"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1370"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1374"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1378"><rect x="618.68" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1382"><rect x="618.68" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath></defs><g transform="translate(-621.34 -349.25)"><g transform="translate(0,-14.18)" clip-path="url(#clipPath1382)" fill="#b3b3b3"><g stroke="#b4b4b4" stroke-linecap="round"><g stroke-width="2.2535"><path d="m686.4 383.13h34.461"></path><path d="m686.4 434.78h34.461"></path><path d="m686.4 602.64h34.461"></path><path d="m686.4 654.29h34.461"></path><path d="m686.4 705.94h34.461"></path><path d="m686.4 757.59h34.461"></path><path d="m686.4 809.24h34.461"></path></g><g stroke-width="1.4468"><path d="m707.72 396.04h13.549"></path><path d="m707.72 408.95h13.549"></path><path d="m707.72 421.86h13.549"></path><path d="m707.72 447.69h13.549"></path><path d="m707.72 460.6h13.549"></path><path d="m707.72 473.51h13.549"></path><path d="m707.72 615.55h13.549"></path><path d="m707.72 628.46h13.549"></path><path d="m707.72 641.38h13.549"></path><path d="m707.72 667.2h13.549"></path><path d="m707.72 680.11h13.549"></path><path d="m707.72 693.03h13.549"></path><path d="m707.72 718.85h13.549"></path><path d="m707.72 731.76h13.549"></path><path d="m707.72 744.68h13.549"></path><path d="m707.72 770.5h13.549"></path><path d="m707.72 783.41h13.549"></path></g><path d="m686.4 538.08h34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m707.72 563.9h13.549"></path><path d="m707.72 576.81h13.549"></path><path d="m707.72 589.73h13.549"></path><path d="m707.72 499.34h13.549"></path><path d="m707.72 512.25h13.549"></path><path d="m707.72 525.16h13.549"></path></g></g><g font-family="Sawasdee" font-size="20px" letter-spacing="0px" word-spacing="0px"><text x="732.51788" y="816.73883" style="line-height:125%;" xml:space="preserve"><tspan x="732.51788" y="816.73883">60</tspan></text><text x="732.48859" y="764.85846" style="line-height:125%;" xml:space="preserve"><tspan x="732.48859" y="764.85846">50</tspan></text><text x="732.9671" y="713.24292" style="line-height:125%;" xml:space="preserve"><tspan x="732.9671" y="713.24292">40</tspan></text><text x="732.29816" y="661.56879" style="line-height:125%;" xml:space="preserve"><tspan x="732.29816" y="661.56879">30</tspan></text><text x="732.47394" y="609.91901" style="line-height:125%;" xml:space="preserve"><tspan x="732.47394" y="609.91901">20</tspan></text><text x="731.29718" y="545.35681" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="545.35681">10</tspan></text><text x="738.29425" y="493.71683" style="line-height:125%;" xml:space="preserve"><tspan x="738.29425" y="493.71683">0</tspan></text><text x="738.29913" y="441.98407" style="line-height:125%;" xml:space="preserve"><tspan x="738.29913" y="441.98407">5</tspan></text><text x="731.29718" y="390.41727" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="390.41727">10</tspan></text></g><path d="m708.23 796.33h13.549" stroke="#b4b4b4" stroke-linecap="round" stroke-width="1.4468"></path><g transform="translate(0,3.0785)" stroke="#b4b4b4" stroke-linecap="round"><path d="m657.43 380.16h-34.461" stroke-width="2.2535"></path><path d="m657.43 431.81h-34.461" stroke-width="2.2535"></path><path d="m658.06 483.46h-34.461" stroke-width="3.5"></path><g stroke-width="2.2535"><path d="m657.43 599.68h-34.461"></path><path d="m657.43 651.33h-34.461"></path><path d="m657.43 702.98h-34.461"></path><path d="m657.43 754.62h-34.461"></path><path d="m657.43 806.27h-34.461"></path></g><g stroke-width="1.4468"><path d="m636.12 393.08h-13.549"></path><path d="m636.12 405.99h-13.549"></path><path d="m636.12 418.9h-13.549"></path><path d="m636.12 444.73h-13.549"></path><path d="m636.12 457.64h-13.549"></path><path d="m636.12 470.55h-13.549"></path><path d="m636.12 612.59h-13.549"></path><path d="m636.12 625.5h-13.549"></path><path d="m636.12 638.41h-13.549"></path><path d="m636.12 664.24h-13.549"></path><path d="m636.12 677.15h-13.549"></path><path d="m636.12 690.06h-13.549"></path><path d="m636.12 715.89h-13.549"></path><path d="m636.12 728.8h-13.549"></path><path d="m636.12 741.71h-13.549"></path><path d="m636.12 767.54h-13.549"></path><path d="m636.12 780.45h-13.549"></path></g><path d="m657.43 535.11h-34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m636.12 560.94h-13.549"></path><path d="m636.12 573.85h-13.549"></path><path d="m636.12 586.76h-13.549"></path><path d="m636.12 496.38h-13.549"></path><path d="m636.12 509.29h-13.549"></path><path d="m636.12 522.2h-13.549"></path><path d="m635.61 793.36h-13.549"></path></g></g></g><g transform="translate(0,-14.18)" clip-path="url(#clipPath1378)" stroke-linecap="round"><path d="m673.43 370.93v445.71" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m673.43 370.93v445.71" fill="#454545" stroke="#494949" stroke-width="14.545"></path><path d="m673.43 370.93v445.71" fill="#585858" stroke="#515151" stroke-width="14.091"></path><path d="m673.43 370.93v445.71" fill="#6a6a6a" stroke="#595959" stroke-width="13.636"></path><path d="m673.43 370.93v445.71" fill="#7d7d7d" stroke="#616161" stroke-width="13.182"></path><path d="m673.43 370.93v445.71" fill="#8f8f8f" stroke="#696969" stroke-width="12.727"></path><path d="m673.43 370.93v445.71" fill="#a2a2a2" stroke="#717171" stroke-width="12.273"></path><path d="m673.43 370.93v445.71" fill="#b4b4b4" stroke="#797979" stroke-width="11.818"></path><path d="m673.43 370.93v445.71" fill="#c7c7c7" stroke="#818181" stroke-width="11.364"></path><path d="m673.43 370.93v445.71" fill="#d9d9d9" stroke="#898989" stroke-width="10.909"></path><path d="m673.43 370.93v445.71" fill="#ececec" stroke="#919191" stroke-width="10.455"></path><path d="m673.43 370.93v445.71" fill="#fff" stroke="#9a9a9a" stroke-width="10"></path></g><g stroke-linecap="round"><path d="m673.43 356.75v445.71" clip-path="url(#clipPath1374)" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m679.64 802.47v-445.18" clip-path="url(#clipPath1370)" fill="#999" stroke="#b1b1b1" stroke-width=".6"></path><path d="m673.43 356.75v445.71" clip-path="url(#clipPath1366)" fill="#fff" opacity=".50896" stroke="url(#linearGradient7595)" stroke-width="12"></path></g><g transform="translate(203.35,-14.18)" clip-path="url(#clipPath1358)" fill="#b3b3b3"><g stroke="#b4b4b4" stroke-linecap="round"><g stroke-width="2.2535"><path d="m686.4 383.13h34.461"></path><path d="m686.4 434.78h34.461"></path><path d="m686.4 602.64h34.461"></path><path d="m686.4 654.29h34.461"></path><path d="m686.4 705.94h34.461"></path><path d="m686.4 757.59h34.461"></path><path d="m686.4 809.24h34.461"></path></g><g stroke-width="1.4468"><path d="m707.72 396.04h13.549"></path><path d="m707.72 408.95h13.549"></path><path d="m707.72 421.86h13.549"></path><path d="m707.72 447.69h13.549"></path><path d="m707.72 460.6h13.549"></path><path d="m707.72 473.51h13.549"></path><path d="m707.72 615.55h13.549"></path><path d="m707.72 628.46h13.549"></path><path d="m707.72 641.38h13.549"></path><path d="m707.72 667.2h13.549"></path><path d="m707.72 680.11h13.549"></path><path d="m707.72 693.03h13.549"></path><path d="m707.72 718.85h13.549"></path><path d="m707.72 731.76h13.549"></path><path d="m707.72 744.68h13.549"></path><path d="m707.72 770.5h13.549"></path><path d="m707.72 783.41h13.549"></path></g><path d="m686.4 538.08h34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m707.72 563.9h13.549"></path><path d="m707.72 576.81h13.549"></path><path d="m707.72 589.73h13.549"></path><path d="m707.72 499.34h13.549"></path><path d="m707.72 512.25h13.549"></path><path d="m707.72 525.16h13.549"></path></g></g><g font-family="Sawasdee" font-size="20px" letter-spacing="0px" word-spacing="0px"><text x="732.51788" y="816.73883" style="line-height:125%;" xml:space="preserve"><tspan x="732.51788" y="816.73883">60</tspan></text><text x="732.48859" y="764.85846" style="line-height:125%;" xml:space="preserve"><tspan x="732.48859" y="764.85846">50</tspan></text><text x="732.9671" y="713.24292" style="line-height:125%;" xml:space="preserve"><tspan x="732.9671" y="713.24292">40</tspan></text><text x="732.29816" y="661.56879" style="line-height:125%;" xml:space="preserve"><tspan x="732.29816" y="661.56879">30</tspan></text><text x="732.47394" y="609.91901" style="line-height:125%;" xml:space="preserve"><tspan x="732.47394" y="609.91901">20</tspan></text><text x="731.29718" y="545.35681" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="545.35681">10</tspan></text><text x="738.29425" y="493.71683" style="line-height:125%;" xml:space="preserve"><tspan x="738.29425" y="493.71683">0</tspan></text><text x="738.29913" y="441.98407" style="line-height:125%;" xml:space="preserve"><tspan x="738.29913" y="441.98407">5</tspan></text><text x="731.29718" y="390.41727" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="390.41727">10</tspan></text></g><path d="m708.23 796.33h13.549" stroke="#b4b4b4" stroke-linecap="round" stroke-width="1.4468"></path><g transform="translate(0,3.0785)" stroke="#b4b4b4" stroke-linecap="round"><path d="m657.43 380.16h-34.461" stroke-width="2.2535"></path><path d="m657.43 431.81h-34.461" stroke-width="2.2535"></path><path d="m658.06 483.46h-34.461" stroke-width="3.5"></path><g stroke-width="2.2535"><path d="m657.43 599.68h-34.461"></path><path d="m657.43 651.33h-34.461"></path><path d="m657.43 702.98h-34.461"></path><path d="m657.43 754.62h-34.461"></path><path d="m657.43 806.27h-34.461"></path></g><g stroke-width="1.4468"><path d="m636.12 393.08h-13.549"></path><path d="m636.12 405.99h-13.549"></path><path d="m636.12 418.9h-13.549"></path><path d="m636.12 444.73h-13.549"></path><path d="m636.12 457.64h-13.549"></path><path d="m636.12 470.55h-13.549"></path><path d="m636.12 612.59h-13.549"></path><path d="m636.12 625.5h-13.549"></path><path d="m636.12 638.41h-13.549"></path><path d="m636.12 664.24h-13.549"></path><path d="m636.12 677.15h-13.549"></path><path d="m636.12 690.06h-13.549"></path><path d="m636.12 715.89h-13.549"></path><path d="m636.12 728.8h-13.549"></path><path d="m636.12 741.71h-13.549"></path><path d="m636.12 767.54h-13.549"></path><path d="m636.12 780.45h-13.549"></path></g><path d="m657.43 535.11h-34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m636.12 560.94h-13.549"></path><path d="m636.12 573.85h-13.549"></path><path d="m636.12 586.76h-13.549"></path><path d="m636.12 496.38h-13.549"></path><path d="m636.12 509.29h-13.549"></path><path d="m636.12 522.2h-13.549"></path><path d="m635.61 793.36h-13.549"></path></g></g></g><g transform="translate(203.35,-14.18)" clip-path="url(#clipPath1354)" stroke-linecap="round"><path d="m673.43 370.93v445.71" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m673.43 370.93v445.71" fill="#454545" stroke="#494949" stroke-width="14.545"></path><path d="m673.43 370.93v445.71" fill="#585858" stroke="#515151" stroke-width="14.091"></path><path d="m673.43 370.93v445.71" fill="#6a6a6a" stroke="#595959" stroke-width="13.636"></path><path d="m673.43 370.93v445.71" fill="#7d7d7d" stroke="#616161" stroke-width="13.182"></path><path d="m673.43 370.93v445.71" fill="#8f8f8f" stroke="#696969" stroke-width="12.727"></path><path d="m673.43 370.93v445.71" fill="#a2a2a2" stroke="#717171" stroke-width="12.273"></path><path d="m673.43 370.93v445.71" fill="#b4b4b4" stroke="#797979" stroke-width="11.818"></path><path d="m673.43 370.93v445.71" fill="#c7c7c7" stroke="#818181" stroke-width="11.364"></path><path d="m673.43 370.93v445.71" fill="#d9d9d9" stroke="#898989" stroke-width="10.909"></path><path d="m673.43 370.93v445.71" fill="#ececec" stroke="#919191" stroke-width="10.455"></path><path d="m673.43 370.93v445.71" fill="#fff" stroke="#9a9a9a" stroke-width="10"></path></g><g stroke-linecap="round"><path d="m876.78 356.75v445.71" clip-path="url(#clipPath1350)" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m882.99 802.47v-445.18" clip-path="url(#clipPath1346)" fill="#999" stroke="#b1b1b1" stroke-width=".6"></path><path d="m876.78 356.75v445.71" clip-path="url(#clipPath1342)" fill="#fff" opacity=".50896" stroke="url(#linearGradient7468)" stroke-width="12"></path></g><g transform="translate(-1.3202,15.152)" clip-path="url(#clipPath1338)"><path transform="matrix(.53231 0 0 .99811 560.96 12.701)" d="m649.84 478.85v126.27l31.315-18.94s-35.355-47.982 0-83.338c-27.779-21.466-31.315-23.991-31.315-23.991z" fill="#a1a1a1" filter="url(#filter4165-1)"></path><path d="m890.45 497.09h34.461" fill="#e6e6e6" stroke="#b4b4b4" stroke-linecap="round" stroke-width="3.5"></path><rect x="847.03" y="488.03" width="62.143" height="129.29" rx="3" ry="3" fill="#4d4d4d"></rect><rect x="847.97" y="552.42" width="60.419" height="3.5355" fill="#e6e6e6"></rect><rect x="847.72" y="488.74" width="60.613" height="21.071" rx="2.1483" ry="2" fill="url(#linearGradient7718)"></rect><rect x="847.92" y="540.26" width="58.811" height="10.119" fill="#333"></rect><rect x="847.03" y="530.89" width="61.133" height="8.7929" fill="#333"></rect><rect x="847.03" y="512.48" width="61.133" height="4.5457" fill="#1a1a1a"></rect><rect x="847.03" y="518.25" width="61.133" height="11.364" fill="#1a1a1a"></rect><rect transform="scale(1,-1)" x="847.72" y="-511.76" width="60.012" height="2.2612" rx="1.0235" ry=".63958" fill="url(#linearGradient7720)"></rect><rect x="847.89" y="517.03" width="58.633" height="1.1452" rx="1" ry=".3239" fill="url(#linearGradient7722)"></rect><rect x="847.89" y="529.76" width="58.633" height=".9666" rx="1" ry=".2734" fill="url(#linearGradient7724)"></rect><rect x="847.89" y="539.01" width="58.633" height=".60946" rx="1" ry=".17238" fill="url(#linearGradient7726)"></rect><rect transform="scale(1,-1)" x="847.34" y="-616.24" width="61.118" height="20.321" rx="2.1662" ry="1.9288" fill="url(#linearGradient7728)"></rect><rect transform="scale(1,-1)" x="847.92" y="-567.93" width="58.811" height="9.7593" fill="#333"></rect><rect transform="scale(1,-1)" x="847.03" y="-576.96" width="61.133" height="8.4799" fill="#666"></rect><rect transform="scale(1,-1)" x="847.03" y="-594.72" width="61.133" height="4.3839" fill="#808080"></rect><rect transform="scale(1,-1)" x="847.03" y="-589.16" width="61.133" height="10.96" fill="#808080"></rect><rect transform="scale(1,-1)" x="847.34" y="-597.6" width="60.767" height="2.1808" rx="1.0364" ry=".61681" fill="url(#linearGradient7730)"></rect><rect transform="scale(1,-1)" x="847.89" y="-590.84" width="60.24" height="1.1044" rx="1.0274" ry=".31237" fill="url(#linearGradient7732)"></rect><rect transform="scale(1,-1)" x="847.89" y="-578.82" width="59.883" height=".9322" rx="1.0213" ry=".26366" fill="url(#linearGradient7734)"></rect><rect transform="scale(1,-1)" x="847.89" y="-569.52" width="59.347" height=".58776" rx="1.0122" ry=".16624" fill="url(#linearGradient7736)"></rect></g><g transform="translate(406.7,-14.18)" clip-path="url(#clipPath1334)" stroke-linecap="round"><path d="m673.43 370.93v445.71" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m673.43 370.93v445.71" fill="#454545" stroke="#494949" stroke-width="14.545"></path><path d="m673.43 370.93v445.71" fill="#585858" stroke="#515151" stroke-width="14.091"></path><path d="m673.43 370.93v445.71" fill="#6a6a6a" stroke="#595959" stroke-width="13.636"></path><path d="m673.43 370.93v445.71" fill="#7d7d7d" stroke="#616161" stroke-width="13.182"></path><path d="m673.43 370.93v445.71" fill="#8f8f8f" stroke="#696969" stroke-width="12.727"></path><path d="m673.43 370.93v445.71" fill="#a2a2a2" stroke="#717171" stroke-width="12.273"></path><path d="m673.43 370.93v445.71" fill="#b4b4b4" stroke="#797979" stroke-width="11.818"></path><path d="m673.43 370.93v445.71" fill="#c7c7c7" stroke="#818181" stroke-width="11.364"></path><path d="m673.43 370.93v445.71" fill="#d9d9d9" stroke="#898989" stroke-width="10.909"></path><path d="m673.43 370.93v445.71" fill="#ececec" stroke="#919191" stroke-width="10.455"></path><path d="m673.43 370.93v445.71" fill="#fff" stroke="#9a9a9a" stroke-width="10"></path></g><g stroke-linecap="round"><path d="m1080.1 356.75v445.71" clip-path="url(#clipPath1330)" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m1086.3 802.47v-445.18" clip-path="url(#clipPath1326)" fill="#999" stroke="#b1b1b1" stroke-width=".6"></path><path d="m1080.1 356.75v445.71" clip-path="url(#clipPath1322)" fill="#fff" opacity=".50896" stroke="url(#linearGradient7341)" stroke-width="12"></path></g><g clip-path="url(#clipPath1318)"><path transform="matrix(.53231 0 0 .99811 762.99 -72.147)" d="m649.84 478.85v126.27l31.315-18.94s-35.355-47.982 0-83.338c-27.779-21.466-31.315-23.991-31.315-23.991z" fill="#a1a1a1" filter="url(#filter4165-4)"></path><path d="m1092.5 412.25h34.461" fill="#e6e6e6" stroke="#b4b4b4" stroke-linecap="round" stroke-width="3.5"></path><rect x="1049.1" y="403.18" width="62.143" height="129.29" rx="3" ry="3" fill="#4d4d4d"></rect><rect x="1050" y="467.57" width="60.419" height="3.5355" fill="#e6e6e6"></rect><rect x="1049.8" y="403.9" width="60.613" height="21.071" rx="2.1483" ry="2" fill="url(#linearGradient7738)"></rect><rect x="1050" y="455.41" width="58.811" height="10.119" fill="#333"></rect><rect x="1049.1" y="446.05" width="61.133" height="8.7929" fill="#333"></rect><rect x="1049.1" y="427.63" width="61.133" height="4.5457" fill="#1a1a1a"></rect><rect x="1049.1" y="433.4" width="61.133" height="11.364" fill="#1a1a1a"></rect><rect transform="scale(1,-1)" x="1049.8" y="-426.91" width="60.012" height="2.2612" rx="1.0235" ry=".63958" fill="url(#linearGradient7740)"></rect><rect x="1049.9" y="432.19" width="58.633" height="1.1452" rx="1" ry=".3239" fill="url(#linearGradient7742)"></rect><rect x="1049.9" y="444.91" width="58.633" height=".9666" rx="1" ry=".2734" fill="url(#linearGradient7744)"></rect><rect x="1049.9" y="454.16" width="58.633" height=".60946" rx="1" ry=".17238" fill="url(#linearGradient7746)"></rect><rect transform="scale(1,-1)" x="1049.4" y="-531.39" width="61.118" height="20.321" rx="2.1662" ry="1.9288" fill="url(#linearGradient7748)"></rect><rect transform="scale(1,-1)" x="1050" y="-483.08" width="58.811" height="9.7593" fill="#333"></rect><rect transform="scale(1,-1)" x="1049.1" y="-492.12" width="61.133" height="8.4799" fill="#666"></rect><rect transform="scale(1,-1)" x="1049.1" y="-509.88" width="61.133" height="4.3839" fill="#808080"></rect><rect transform="scale(1,-1)" x="1049.1" y="-504.31" width="61.133" height="10.96" fill="#808080"></rect><rect transform="scale(1,-1)" x="1049.4" y="-512.75" width="60.767" height="2.1808" rx="1.0364" ry=".61681" fill="url(#linearGradient7750)"></rect><rect transform="scale(1,-1)" x="1049.9" y="-505.99" width="60.24" height="1.1044" rx="1.0274" ry=".31237" fill="url(#linearGradient7752)"></rect><rect transform="scale(1,-1)" x="1049.9" y="-493.97" width="59.883" height=".9322" rx="1.0213" ry=".26366" fill="url(#linearGradient7754)"></rect><rect transform="scale(1,-1)" x="1049.9" y="-484.67" width="59.347" height=".58776" rx="1.0122" ry=".16624" fill="url(#linearGradient7756)"></rect></g></g>', 2)
+  ])]);
+}
+const Ct = /* @__PURE__ */ u(wt, [["render", bt]]), Gt = w({
+  name: "VAFader",
+  components: {
+    defaultFaderHead: vt,
+    defaultFaderBackground: Ct
+  },
+  emits: ["update:modelValue"],
+  setup(t) {
+    const e = y(new M(t.minValue, t.maxValue)), a = y(0), r = y(t.modelValue), i = y(e.value.getCurvedValue(t.modelValue)), s = y(0), o = y(void 0);
+    return {
+      valueCurve: e,
+      faderContainerY: a,
+      linearValue: r,
+      curvedValue: i,
+      // faderContainer,
+      // faderBackground,
+      // faderHead,
+      faderHeadHeight: s,
+      resizeObserver: o
+    };
+  },
+  props: {
+    modelValue: {
+      required: !0,
+      type: Number
+    },
+    minValue: {
+      required: !0,
+      type: Number
+    },
+    maxValue: {
+      required: !0,
+      type: Number
+    },
+    height: {
+      required: !1,
+      type: Number,
+      default: 200
+    },
+    width: {
+      required: !1,
+      type: Number,
+      default: 46
+    },
+    default: {
+      required: !1,
+      type: Number
+    }
+  },
+  computed: {
+    midValue() {
+      return this.minValue + this.valueRange / 2;
+    },
+    valueRange() {
+      return this.maxValue - this.minValue;
+    },
+    faderDragRange() {
+      return Math.abs(this.height - this.faderHeadHeight);
+    },
+    faderHeadTop() {
+      const t = (this.linearValue - this.minValue) / (this.maxValue - this.minValue);
+      return this.faderDragRange - t * this.faderDragRange;
+    },
+    cssVars() {
+      return {
+        "--fader-height": `${this.height}px`,
+        "--fader-width": `${this.width}px`,
+        "--fader-head-top": `${this.faderHeadTop}px`
+      };
+    }
+  },
+  mounted() {
+    this.resizeObserver = new ResizeObserver((t, e) => {
+      this.faderHeadHeight = this.getFaderHeadHeight();
+    }), this.resizeObserver.observe(this.$refs.faderHead);
+  },
+  unmounted() {
+    this.resizeObserver?.disconnect();
+  },
+  methods: {
+    getContainedImgOrSvg(t) {
+      if (t.children.length == 1) {
+        if (t.children.item(0) instanceof SVGElement)
+          return t.children.item(0);
+        if (t.children.item(0) instanceof HTMLImageElement)
+          return t.children.item(0);
+      }
+    },
+    getFaderHeadHeight() {
+      const t = this.$refs.faderHead, e = this.getContainedImgOrSvg(t);
+      return e ? e.getBoundingClientRect().height : t.getBoundingClientRect().height;
+    },
+    onHeadMouseDown(t) {
+      t.preventDefault(), this.faderContainerY = this.$refs.faderContainer.getBoundingClientRect().y, this.faderHeadHeight = this.getFaderHeadHeight(), document.addEventListener("mousemove", this.onHeadMouseDrag), document.addEventListener("touchmove", this.onHeadTouchDrag), document.addEventListener("mouseup", this.onDocumentMouseUp), document.addEventListener("touchend", this.onDocumentMouseUp);
+    },
+    onDocumentMouseUp() {
+      document.removeEventListener("mousemove", this.onHeadMouseDrag), document.removeEventListener("touchmove", this.onHeadTouchDrag), document.removeEventListener("mouseup", this.onDocumentMouseUp), document.removeEventListener("touchend", this.onDocumentMouseUp);
+    },
+    onHeadDblClick() {
+      const t = typeof this.default > "u" ? this.midValue : this.default;
+      this.$emit("update:modelValue", this.valueCurve.getCurvedValue(t));
+    },
+    onHeadDrag(t) {
+      let e = t - this.faderContainerY;
+      e > this.height ? e = this.height : e < 0 && (e = 0);
+      const r = (this.height - e) / this.height * this.valueRange + this.minValue;
+      this.$emit(
+        "update:modelValue",
+        this.valueCurve.getCurvedValue(r)
+      );
+    },
+    onHeadTouchDrag(t) {
+      t.touches[0] && this.onHeadDrag(t.touches[0].clientY);
+    },
+    onHeadMouseDrag(t) {
+      this.onHeadDrag(t.clientY);
+    }
+  },
+  watch: {
+    modelValue(t) {
+      this.curvedValue = t, this.linearValue = this.valueCurve.getLinearValue(this.curvedValue);
+    },
+    minValue(t) {
+      this.valueCurve = new M(t, this.maxValue);
+    },
+    maxValue(t) {
+      this.valueCurve = new M(this.minValue, t);
+    }
+  }
+}), St = {
+  ref: "faderBackground",
+  class: "fader-background"
+};
+function Mt(t, e, a, r, i, s) {
+  const o = G("defaultFaderBackground"), h = G("defaultFaderHead");
+  return c(), p("div", {
+    ref: "faderContainer",
+    class: "fader-container",
+    style: S(t.cssVars)
+  }, [
+    n("div", St, [
+      U(t.$slots, "faderBackground", {}, () => [
+        k(o)
+      ], !0)
+    ], 512),
+    n("div", {
+      ref: "faderHead",
+      class: "fader-head",
+      onMousedown: e[0] || (e[0] = (...g) => t.onHeadMouseDown && t.onHeadMouseDown(...g)),
+      onTouchstart: e[1] || (e[1] = (...g) => t.onHeadMouseDown && t.onHeadMouseDown(...g)),
+      onDblclick: e[2] || (e[2] = (...g) => t.onHeadDblClick && t.onHeadDblClick(...g))
+    }, [
+      U(t.$slots, "faderHead", {}, () => [
+        k(h)
+      ], !0)
+    ], 544)
+  ], 4);
+}
+const Vt = /* @__PURE__ */ u(Gt, [["render", Mt], ["__scopeId", "data-v-9d74edfd"]]), Dt = {}, Ut = {
+  width: "50",
+  height: "50",
+  viewBox: "0 0 100 100"
+};
+function zt(t, e) {
+  return c(), p("svg", Ut, [...e[0] || (e[0] = [
+    V(`<g data-v-3cef4f4a><g data-v-3cef4f4a><circle class="st0" cx="50%" cy="50%" r="50%" data-v-3cef4f4a></circle><g transform="translate(-20 -20)" data-v-3cef4f4a><g transform="translate(0 -6)" data-v-3cef4f4a><path d="M109.4,78.2c-2.3-2.5-4-5.6-4.6-9c-0.7-3.5-0.5-6.9,0.6-10.2c-2.2-4.6-5.3-8.6-9.2-11.9c-3.3,0.2-6.8-0.4-10-2
+                      s-5.8-4-7.7-6.7c-5.1-1-10.2-1.1-15-0.2c-1.9,2.8-4.6,5.1-7.8,6.6s-6.7,2.1-10.1,1.7c-3.8,3.1-7.1,7.1-9.5,11.6
+                      c0.9,3.2,1.1,6.7,0.4,10.2c-0.9,3.5-2.6,6.5-5,8.9c0.1,5.1,1.1,10.1,3.1,14.6c3.1,1.2,5.9,3.2,8.2,6.2c2.2,2.8,3.5,6.2,4,9.4
+                      c4,3,8.4,5.3,13.5,6.7c2.9-1.6,6.3-2.6,9.9-2.6s6.9,1,9.9,2.8c4.8-1.1,9.5-3.3,13.6-6.4c0.6-3.3,1.9-6.5,4.2-9.3
+                      c2.3-2.8,5.2-4.7,8.4-5.9c1-2.2,1.9-4.6,2.5-7.1C109.1,83.4,109.3,80.7,109.4,78.2z" data-v-3cef4f4a></path></g><ellipse class="st1" cx="70.4" cy="70.4" rx="26.7" ry="26.7" data-v-3cef4f4a></ellipse><g transform="translate(0 -8)" data-v-3cef4f4a><path class="st2" d="M71.5,28.5c-0.4,0-0.9,0-1.1,0c-0.3,0-0.9,0-1.1,0v31h2.5v-31H71.5z" data-v-3cef4f4a></path></g></g></g></g>`, 1)
+  ])]);
+}
+const $t = /* @__PURE__ */ u(Dt, [["render", zt], ["__scopeId", "data-v-3cef4f4a"]]), Wt = w({
+  components: {
+    defaultKnob: $t
+  },
+  setup(t) {
+    const e = {
+      curvedValue: 0,
+      linearValue: 0,
+      unsteppedValue: 0,
+      rotationMax: 3 * Math.PI / 4,
+      dragRange: 70,
+      prevY: -1,
+      valueCurve: new M(t.minValue, t.maxValue)
+      // audioParamValue: null as AudioParam | null
+    };
+    return t.modelValue instanceof Number && (e.linearValue = t.modelValue, e.curvedValue = e.valueCurve.getCurvedValue(t.modelValue), e.unsteppedValue = e.curvedValue), F(e);
+  },
+  props: {
+    modelValue: {
+      required: !0,
+      type: Number
+    },
+    minValue: {
+      required: !0,
+      type: Number
+    },
+    maxValue: {
+      required: !0,
+      type: Number
+    },
+    step: {
+      required: !1,
+      type: Number,
+      default: 0
+    },
+    size: {
+      required: !1,
+      type: Number,
+      default: 60
+    },
+    default: {
+      required: !1,
+      type: Number
+    }
+  },
+  computed: {
+    knobRotation() {
+      return (this.linearValue - this.midValue) / (this.valueRange / 2) * this.rotationMax;
+    },
+    midValue() {
+      return this.minValue + this.valueRange / 2;
+    },
+    valueRange() {
+      return this.maxValue - this.minValue;
+    }
+  },
+  methods: {
+    onKnobMouseDown(t) {
+      t.preventDefault(), document.addEventListener("mousemove", this.onKnobMouseDrag), document.addEventListener("touchmove", this.onKnobTouchDrag), document.addEventListener("mouseup", this.onDocumentMouseUp), document.addEventListener("touchend", this.onDocumentMouseUp);
+    },
+    onDocumentMouseUp() {
+      document.removeEventListener("mousemove", this.onKnobMouseDrag), document.removeEventListener("touchmove", this.onKnobTouchDrag), document.removeEventListener("mouseup", this.onDocumentMouseUp), document.removeEventListener("touchend", this.onDocumentMouseUp), this.prevY = -1;
+    },
+    onKnobDblClick() {
+      const t = typeof this.default > "u" ? this.midValue : this.default;
+      this.unsteppedValue = t, this.$emit("update:modelValue", this.valueCurve.getCurvedValue(t));
+    },
+    roundToStep(t) {
+      if (this.step === 0)
+        throw "step is zero or undefined";
+      const e = Math.round(t / this.step) * this.step;
+      return e < this.minValue ? this.minValue : e > this.maxValue ? this.maxValue : e;
+    },
+    onKnobDrag(t) {
+      if (this.prevY >= 0) {
+        const e = this.prevY - t;
+        let a = this.unsteppedValue + e / this.dragRange * (this.valueRange / 2);
+        a = a > this.maxValue ? this.maxValue : a < this.minValue ? this.minValue : a, this.unsteppedValue = a;
+        const r = this.step === 0 ? this.unsteppedValue : this.roundToStep(this.unsteppedValue);
+        this.$emit(
+          "update:modelValue",
+          this.valueCurve.getCurvedValue(r)
+        );
+      }
+    },
+    onKnobTouchDrag(t) {
+      t.touches[0] && (this.onKnobDrag(t.touches[0].pageY), this.prevY = t.touches[0].pageY);
+    },
+    onKnobMouseDrag(t) {
+      this.onKnobDrag(t.pageY), this.prevY = t.pageY;
+    }
+  },
+  watch: {
+    modelValue(t) {
+      this.curvedValue = t, this.unsteppedValue = this.valueCurve.getLinearValue(this.curvedValue), this.linearValue = this.step === 0 ? this.unsteppedValue : this.roundToStep(this.unsteppedValue);
+    }
+  }
+}), Tt = { class: "control-container" }, Pt = { class: "knob-row" };
+function Ht(t, e, a, r, i, s) {
+  const o = G("default-knob");
+  return c(), p("div", Tt, [
+    n("div", Pt, [
+      n("span", {
+        onMousedown: e[0] || (e[0] = (...h) => t.onKnobMouseDown && t.onKnobMouseDown(...h)),
+        onTouchstart: e[1] || (e[1] = (...h) => t.onKnobMouseDown && t.onKnobMouseDown(...h)),
+        onDblclick: e[2] || (e[2] = (...h) => t.onKnobDblClick && t.onKnobDblClick(...h)),
+        class: "knob-container",
+        style: S(`transform: rotate(${t.knobRotation}rad); width: ${t.size}px; height: ${t.size}px;`)
+      }, [
+        U(t.$slots, "default", {}, () => [
+          k(o)
+        ], !0)
+      ], 36)
+    ])
+  ]);
+}
+const At = /* @__PURE__ */ u(Wt, [["render", Ht], ["__scopeId", "data-v-775457f1"]]), b = 20, C = -120, qt = 3, It = w({
+  name: "VASpectrumAnalyzer",
+  data() {
+    return {
+      continueDrawing: !1,
+      canvas: null,
+      canvasContext: null
+    };
+  },
+  props: {
+    input: {
+      required: !1,
+      type: AudioNode
+    },
+    fftSize: {
+      type: Number,
+      required: !1,
+      default: 1024
+    },
+    fillStyle: {
+      type: String,
+      required: !1,
+      default: "none"
+    },
+    lineColor: {
+      type: String,
+      required: !1,
+      default: "black"
+    },
+    backgroundColor: {
+      type: String,
+      required: !1,
+      default: "white"
+    },
+    gridColor: {
+      type: String,
+      required: !1,
+      default: "gray"
+    },
+    borderColor: {
+      type: String,
+      required: !1,
+      default: "black"
+    },
+    height: {
+      type: Number,
+      required: !1,
+      default: -1
+    },
+    width: {
+      type: Number,
+      required: !1,
+      default: 1200
+    },
+    font: {
+      required: !1,
+      type: String,
+      default: "Helvetica, sans-serif"
+    }
+  },
+  setup(t) {
+    const e = T(t.fftSize, t.input);
+    return W(() => t.input, e.onInputChanged), {
+      ...e,
+      ...P()
+    };
+  },
+  computed: {
+    graphWidth() {
+      return this.width;
+    },
+    graphHeight() {
+      return this.height < 0 ? this.width / qt : this.height;
+    },
+    cssVars() {
+      return {
+        "--border-color": `${this.borderColor}`
+      };
+    }
+  },
+  mounted() {
+    this.canvasContext = this.$refs.analyserCanvas.getContext("2d"), this.startRendering(this.drawFrequencyDomain);
+  },
+  methods: {
+    scaleX(t, e, a, r) {
+      const i = 0.30111412225233364;
+      let s = (a - e) / a;
+      s *= 1 - i, s = 1 - s;
+      let o = (t - e) / (a - e);
+      return o = Math.pow(o, s), o < 1 && (o *= r), o;
+    },
+    scaleXLegacy(t, e, a, r) {
+      return Math.floor(
+        Math.log2(t - e) / Math.log2(a - e) * r
+      );
+    },
+    drawFrequencyDomain() {
+      if (this.canvasContext) {
+        const t = 0 - C, e = this.input ? this.input.context.sampleRate / 2 : 24e3, a = this.getFloatFrequencyData();
+        if (this.canvasContext.clearRect(0, 0, this.graphWidth, this.graphHeight), this.canvasContext.fillStyle = this.backgroundColor, this.canvasContext.fillRect(0, 0, this.graphWidth, this.graphHeight), a) {
+          this.canvasContext.beginPath(), this.canvasContext.lineWidth = 1, this.canvasContext.strokeStyle = this.lineColor, this.canvasContext.fillStyle = this.lineColor, this.canvasContext.moveTo(0, this.graphHeight);
+          let r = 0, i = this.graphHeight - (a[0] - C) / t * this.graphHeight;
+          for (let s = 0; s < a.length; s++) {
+            const o = (a[s] - C) / t * this.graphHeight, h = s * (e / a.length);
+            this.canvasContext.lineTo(r, i), h >= b && (r = this.scaleX(h, b, e, this.graphWidth), i = this.graphHeight - o, this.fillStyle === "lines" && this.canvasContext.fillRect(r, i, 1, o)), this.canvasContext.lineTo(r, i);
+          }
+          this.canvasContext.lineTo(this.graphWidth, this.graphHeight), this.canvasContext.closePath(), this.canvasContext.stroke(), this.fillStyle === "solid" && this.canvasContext.fill();
+        }
+        this.drawDbMarkers(), this.drawFrequencyMarkers(e);
+      }
+    },
+    drawDbMarkers() {
+      this.drawDbMarker(-20), this.drawDbMarker(-40), this.drawDbMarker(-60), this.drawDbMarker(-80), this.drawDbMarker(-100);
+    },
+    drawDbMarker(t) {
+      if (this.canvasContext) {
+        const e = this.graphHeight - (C - t) / C * this.graphHeight;
+        this.canvasContext.strokeStyle = this.gridColor, this.canvasContext.beginPath(), this.canvasContext.moveTo(0, e), this.canvasContext.lineTo(this.graphWidth, e), this.canvasContext.stroke(), this.canvasContext.font = `12px ${this.font}`, this.canvasContext.fillStyle = this.gridColor, this.canvasContext.fillText(`${t}db`, 10, e);
+      }
+    },
+    drawFrequencyMarkers(t) {
+      this.drawFrequencyMarker(
+        b,
+        t,
+        this.graphWidth > 300,
+        !1
+      ), this.drawFrequencyMarker(25, t), this.drawFrequencyMarker(50, t, !0), this.drawFrequencyMarker(100, t), this.drawFrequencyMarker(200, t, this.graphWidth > 600), this.drawFrequencyMarker(500, t, this.graphWidth > 300), this.drawFrequencyMarker(1e3, t, this.graphWidth > 600), this.drawFrequencyMarker(1500, t), this.drawFrequencyMarker(2e3, t, !0), this.drawFrequencyMarker(3e3, t, this.graphWidth > 600), this.drawFrequencyMarker(5e3, t, this.graphWidth > 300), this.drawFrequencyMarker(7e3, t, this.graphWidth > 600), this.drawFrequencyMarker(1e4, t, !0), this.drawFrequencyMarker(15e3, t, this.graphWidth > 600), this.drawFrequencyMarker(2e4, t, this.graphWidth > 800);
+    },
+    drawFrequencyMarker(t, e, a = !1, r = !0) {
+      if (this.canvasContext && t >= b) {
+        const i = this.scaleX(t, b, e, this.graphWidth);
+        r && (this.canvasContext.strokeStyle = this.gridColor, this.canvasContext.beginPath(), this.canvasContext.moveTo(i, 0), this.canvasContext.lineTo(i, this.graphWidth), this.canvasContext.stroke()), a && (this.canvasContext.font = `14px ${this.font}`, this.canvasContext.fillStyle = this.lineColor, t < 1e3 ? this.canvasContext.fillText(`${t}hz`, i, 50) : this.canvasContext.fillText(`${t / 1e3}khz`, i, 50));
+      }
+    }
+  }
+}), Rt = ["width", "height"];
+function Ot(t, e, a, r, i, s) {
+  return c(), p("canvas", {
+    width: t.graphWidth,
+    height: t.graphHeight,
+    ref: "analyserCanvas",
+    class: "analyser-canvas",
+    style: S(t.cssVars)
+  }, null, 12, Rt);
+}
+const Ft = /* @__PURE__ */ u(It, [["render", Ot], ["__scopeId", "data-v-8be4064b"]]), Lt = w({
+  Name: "VAToggleButton",
+  props: {
+    color: {
+      required: !1,
+      type: String,
+      default: "red"
+    },
+    label: {
+      require: !1,
+      type: String,
+      default: ""
+    }
+  },
+  setup(t) {
+    const e = y(!1), a = H(() => ({
+      "--on-color": `${t.color}`
+    }));
+    function r() {
+      e.value = !e.value;
+    }
+    return { on: e, cssVars: a, onButtonClick: r };
+  }
+});
+function Nt(t, e, a, r, i, s) {
+  return c(), p("button", {
+    onClick: e[0] || (e[0] = (...o) => t.onButtonClick && t.onButtonClick(...o)),
+    class: L([t.on ? "button-on" : "button-off", "button"]),
+    style: S(t.cssVars)
+  }, m(t.label), 7);
+}
+const Et = /* @__PURE__ */ u(Lt, [["render", Nt], ["__scopeId", "data-v-87a8a5ae"]]), Bt = {
+  // test,
+  VAAnalogMeterStereo: _,
+  VAAnalogMeter: J,
+  VAAudioFileVisualizer: ot,
+  VADigitalMeterStereo: dt,
+  VADigitalMeter: mt,
+  VAFader: Vt,
+  VAKnob: At,
+  VASpectrumAnalyzer: Ft,
+  VAToggleButton: Et
+}, Yt = function(e) {
+  Object.entries(Bt).forEach(([a, r]) => {
+    e.component(a, r);
+  });
+};
+export {
+  J as VAAnalogMeter,
+  _ as VAAnalogMeterStereo,
+  ot as VAAudioFileVisualizer,
+  mt as VADigitalMeter,
+  dt as VADigitalMeterStereo,
+  Vt as VAFader,
+  At as VAKnob,
+  Ft as VASpectrumAnalyzer,
+  Et as VAToggleButton,
+  Yt as default
+};