vue-audio-ui 0.1.0

package/README.md

@@ -0,0 +1,42 @@
+# test
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```

package/dist/src/composables/useDraggableControl.d.ts

@@ -0,0 +1,3 @@
+export default function useDraggableControl(dragRootEl: string, height: number, onDrag: (knobValue: number) => any): {
+    onKnobMouseDown: (e: MouseEvent | TouchEvent) => void;
+};

package/dist/src/composables/useMetering.d.ts

@@ -0,0 +1,7 @@
+export declare function useMetering(audioCtx: BaseAudioContext, fftSize: number): {
+    getPeakDb: (buffer: Float32Array) => number;
+    getRmsDb: (buffer: Float32Array) => number;
+    getFloatTimeDomainData: () => Float32Array;
+    getFloatFrequencyData: () => Float32Array;
+    analyzer: AnalyserNode;
+};

package/dist/src/composables/useMeteringSSR.d.ts

@@ -0,0 +1,7 @@
+export declare function useMetering(fftSize: number, input?: AudioNode): {
+    getPeakDb: (buffer: Float32Array) => number;
+    getRmsDb: (buffer: Float32Array) => number;
+    getFloatTimeDomainData: () => Float32Array | undefined;
+    getFloatFrequencyData: () => Float32Array | undefined;
+    onInputChanged: (newInput: AudioNode | undefined, oldInput: AudioNode | undefined) => void;
+};

package/dist/src/composables/useRendering.d.ts

@@ -0,0 +1,4 @@
+export declare function useRendering(): {
+    startRendering: (callback: Function) => void;
+    stopRendering: () => void;
+};

package/dist/src/lib/components/default-fader-background.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/src/lib/components/default-fader-head.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/src/lib/components/default-knob.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/src/lib/test.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    test1: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/src/lib/v-a-analog-meter-stereo.vue.d.ts

@@ -0,0 +1,68 @@
+import { PropType } from 'vue';
+import { AnalogMeterType } from '../types/v-audio-ui-types';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    leftInput: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+    };
+    rightInput: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+    };
+    type: {
+        required: false;
+        type: PropType<AnalogMeterType>;
+        default: string;
+    };
+    fftSize: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    leftInput: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+    };
+    rightInput: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+    };
+    type: {
+        required: false;
+        type: PropType<AnalogMeterType>;
+        default: string;
+    };
+    fftSize: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    type: AnalogMeterType;
+    fftSize: number;
+    width: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/src/lib/v-a-analog-meter.vue.d.ts

@@ -0,0 +1,61 @@
+import { PropType } from 'vue';
+import { AnalogMeterType } from '../types/v-audio-ui-types';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    input: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+        default: undefined;
+    };
+    type: {
+        required: false;
+        type: PropType<AnalogMeterType>;
+        default: string;
+    };
+    fftSize: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {
+    color: import('vue').Ref<string, string>;
+    rotation: import('vue').ComputedRef<string>;
+    value: import('vue').Ref<number, number>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    input: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+        default: undefined;
+    };
+    type: {
+        required: false;
+        type: PropType<AnalogMeterType>;
+        default: string;
+    };
+    fftSize: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    input: AudioNode;
+    type: AnalogMeterType;
+    fftSize: number;
+    width: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/src/lib/v-a-audio-file-visualizer.vue.d.ts

@@ -0,0 +1,87 @@
+import { CurvedRange } from '../util/curved-range';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    lineColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {}, {
+    canvas: HTMLCanvasElement | null;
+    canvasContext: CanvasRenderingContext2D | null;
+    amplitudeData: Float32Array<ArrayBuffer>;
+    markerPosition: number;
+    markerIndex: number;
+    zoomWindowStartIndex: number;
+    zoomWindowEndIndex: number;
+    zoom: number;
+    prevY: number;
+    prevX: number;
+    curedRange: CurvedRange;
+}, {
+    cssVars(): {
+        "--line-color": string;
+        "--background-color": string;
+    };
+    graphWidth(): number;
+    graphHeight(): number;
+    zoomMult(): number;
+    zoomWindowLength(): number;
+}, {
+    loadAudioFromAmplitudeData(data: Float32Array<ArrayBuffer>): void;
+    shiftZoomWindow(numSamples: number): void;
+    setZoomWindow(): void;
+    drawZoom(): void;
+    getMaxSampleValue(sampleData: Float32Array, startIndex: number, endIndex: number): number;
+    getMinSampleValue(sampleData: Float32Array, startIndex: number, endIndex: number): number;
+    getAvgSampleValue(sampleData: Float32Array, startIndex: number, endIndex: number): number;
+    drawAmplitudeSamples(): void;
+    drawAmplitudeAvg(): void;
+    drawAmplitudeMinMax(): void;
+    drawAmplitude(): void;
+    onCanvasDoubleClick(): void;
+    onCanvasMouseDown(e: MouseEvent): void;
+    endDrag(): void;
+    onClickDrag(e: MouseEvent): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    lineColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    width: number;
+    height: number;
+    lineColor: string;
+    backgroundColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/src/lib/v-a-digital-meter-stereo.vue.d.ts

@@ -0,0 +1,145 @@
+import { PropType } from 'vue';
+import { DigitalMeterType } from '../types/v-audio-ui-types';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    leftInput: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+    };
+    rightInput: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+    };
+    type: {
+        required: false;
+        type: PropType<DigitalMeterType>;
+        default: string;
+    };
+    fftSize: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    clippingColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    barColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    markerColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    drawMarkers: {
+        required: false;
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    font: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    leftInput: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+    };
+    rightInput: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+    };
+    type: {
+        required: false;
+        type: PropType<DigitalMeterType>;
+        default: string;
+    };
+    fftSize: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    clippingColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    barColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    markerColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    drawMarkers: {
+        required: false;
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    font: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    type: DigitalMeterType;
+    fftSize: number;
+    width: number;
+    height: number;
+    backgroundColor: string;
+    font: string;
+    clippingColor: string;
+    barColor: string;
+    markerColor: string;
+    drawMarkers: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/src/lib/v-a-digital-meter.vue.d.ts

@@ -0,0 +1,152 @@
+import { PropType } from 'vue';
+import { DigitalMeterType } from '../types/v-audio-ui-types';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    input: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+        default: undefined;
+    };
+    type: {
+        required: false;
+        type: PropType<DigitalMeterType>;
+        default: string;
+    };
+    fftSize: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    clippingColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    barColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    markerColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    drawMarkers: {
+        required: false;
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    font: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    startRendering: (callback: Function) => void;
+    stopRendering: () => void;
+    getPeakDb: (buffer: Float32Array) => number;
+    getRmsDb: (buffer: Float32Array) => number;
+    getFloatTimeDomainData: () => Float32Array | undefined;
+    getFloatFrequencyData: () => Float32Array | undefined;
+    onInputChanged: (newInput: AudioNode | undefined, oldInput: AudioNode | undefined) => void;
+}, {
+    canvasCxt: CanvasRenderingContext2D | null;
+}, {
+    canvasWidth(): number;
+}, {
+    getMeterHeight(db: number): number;
+    scaleY(db: number): number;
+    draw(): void;
+    drawDbMarkers(): void;
+    drawDbMarker(db: number): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    input: {
+        required: false;
+        type: {
+            new (): AudioNode;
+            prototype: AudioNode;
+        };
+        default: undefined;
+    };
+    type: {
+        required: false;
+        type: PropType<DigitalMeterType>;
+        default: string;
+    };
+    fftSize: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    clippingColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    barColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    markerColor: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+    drawMarkers: {
+        required: false;
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        required: false;
+        type: NumberConstructor;
+        default: number;
+    };
+    font: {
+        required: false;
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    input: AudioNode;
+    type: DigitalMeterType;
+    fftSize: number;
+    width: number;
+    height: number;
+    backgroundColor: string;
+    font: string;
+    clippingColor: string;
+    barColor: string;
+    markerColor: string;
+    drawMarkers: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/src/lib/v-a-fader.vue.d.ts

@@ -0,0 +1,71 @@
+import { LinearCurvedRange } from '../util/curved-range';
+declare const _default: import('vue').DefineComponent<{
+    width: number;
+    height: number;
+    modelValue: number;
+    minValue: number;
+    maxValue: number;
+    default?: number | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    valueCurve: import('vue').Ref<{
+        getCurvedValue: (value: number) => number;
+        getLinearValue: (value: number) => number;
+        readonly min: number;
+        readonly max: number;
+    }, LinearCurvedRange | {
+        getCurvedValue: (value: number) => number;
+        getLinearValue: (value: number) => number;
+        readonly min: number;
+        readonly max: number;
+    }>;
+    faderContainerY: import('vue').Ref<number, number>;
+    linearValue: import('vue').Ref<number, number>;
+    curvedValue: import('vue').Ref<number, number>;
+    faderHeadHeight: import('vue').Ref<number, number>;
+    resizeObserver: import('vue').Ref<{
+        disconnect: () => void;
+        observe: (target: Element, options?: ResizeObserverOptions) => void;
+        unobserve: (target: Element) => void;
+    } | undefined, ResizeObserver | {
+        disconnect: () => void;
+        observe: (target: Element, options?: ResizeObserverOptions) => void;
+        unobserve: (target: Element) => void;
+    } | undefined>;
+}, {}, {
+    midValue(): number;
+    valueRange(): number;
+    faderDragRange(): number;
+    faderHeadTop(): number;
+    cssVars(): {
+        "--fader-height": string;
+        "--fader-width": string;
+        "--fader-head-top": string;
+    };
+}, {
+    getContainedImgOrSvg(el: HTMLElement): Element | null | undefined;
+    getFaderHeadHeight(): number;
+    onHeadMouseDown(e: MouseEvent | TouchEvent): void;
+    onDocumentMouseUp(): void;
+    onHeadDblClick(): void;
+    onHeadDrag(currPageY: number): void;
+    onHeadTouchDrag(e: TouchEvent): void;
+    onHeadMouseDrag(e: MouseEvent): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import('vue').PublicProps, Readonly<{
+    width: number;
+    height: number;
+    modelValue: number;
+    minValue: number;
+    maxValue: number;
+    default?: number | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    width: number;
+    height: number;
+}, {}, {
+    defaultFaderHead: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+    defaultFaderBackground: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;