Add definitions for spectrogram@0.0.7 (#38483)

types/spectrogram/index.d.ts

@@ -0,0 +1,34 @@
+// Type definitions for spectrogram 0.0
+// Project: https://github.com/miguelmota/spectrogram/
+// Definitions by: AppLover69 <https://github.com/AppLover69>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+interface SpectrogramOptions {
+    canvas?: {
+        width?: HTMLCanvasElement['width'] | (() => HTMLCanvasElement['width']);
+        height?: HTMLCanvasElement['height'] | (() => HTMLCanvasElement['height']);
+    };
+    audio?: {
+        enable?: boolean;
+    };
+    colors?: (steps: number) => Array<CanvasRenderingContext2D['fillStyle']>;
+}
+
+interface Spectrogram {
+    connectSource(audioBuffer: AudioBuffer, audioContext?: AudioContext): void;
+    connectSource(analyserNode: AnalyserNode, audioContext: AudioContext): void;
+    start(offset?: number): void;
+    stop(): void;
+    pause(): void;
+    resume(): void;
+    clear(canvasContext: CanvasRenderingContext2D): void;
+}
+
+interface SpectrogramConstructor {
+    (canvas: HTMLCanvasElement, options: SpectrogramOptions): Spectrogram;
+    new(canvas: HTMLCanvasElement, options: SpectrogramOptions): Spectrogram;
+}
+
+declare var Spectrogram: SpectrogramConstructor;
+export = Spectrogram;

types/spectrogram/spectrogram-tests.ts

@@ -0,0 +1,73 @@
+import * as Spectrogram from "spectrogram";
+
+// XHR
+const canvas1 = document.createElement('canvas');
+const spectro1 = Spectrogram(canvas1, {
+    audio: {
+        enable: false,
+    },
+});
+const audioContext1 = new AudioContext();
+const request = new XMLHttpRequest();
+request.open('GET', 'audio.mp3', true);
+request.responseType = 'arraybuffer';
+
+request.onload = () => {
+    audioContext1.decodeAudioData(request.response, (buffer) => {
+        spectro1.connectSource(buffer, audioContext1);
+        spectro1.start();
+    });
+};
+
+request.send();
+
+// User media stream
+const canvas2 = document.createElement('canvas');
+const spectro2 = new Spectrogram(canvas2, {
+    canvas: {
+        width: 1280,
+        height: 720,
+    },
+    colors: (steps) => {
+        const frequency = Math.PI / steps;
+        const amplitude = 127;
+        const center = 128;
+        const slice = (Math.PI / 2) * 3.1;
+        const colors = [];
+
+        function toRGBString(v: number) {
+            return `rgba(${[v, v, v, 1].toString()})`;
+        }
+
+        for (let i = 0; i < steps; i++) {
+            const v = (Math.sin((frequency * i) + slice) * amplitude + center) >> 0;
+
+            colors.push(toRGBString(v));
+        }
+
+        return colors;
+    }
+});
+
+const audioContext2 = new AudioContext();
+navigator.getUserMedia(
+    {
+        video: false,
+        audio: true
+    },
+    (stream) => {
+        const input = audioContext2.createMediaStreamSource(stream);
+        const analyser = audioContext2.createAnalyser();
+
+        analyser.smoothingTimeConstant = 0;
+        analyser.fftSize = 2048;
+
+        input.connect(analyser);
+
+        spectro2.connectSource(analyser, audioContext2);
+        spectro2.start();
+    },
+    (error) => {
+        spectro2.stop();
+    },
+);

types/spectrogram/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "spectrogram-tests.ts"
+    ]
+}

types/spectrogram/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }