Merge pull request #92 from kgarner7/main

Support creating Wave just using Analyser Node
foobar404 · Dec 18, 2023 · 03b29e8 · 03b29e8
2 parents 45befe2 + fc9d339
commit 03b29e8
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 10 deletions.
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/src/index.d.ts b/dist/src/index.d.ts
@@ -13,7 +13,7 @@ export { IArcsOptions, ICirclesOptions, ICubesOptions, IFlowerOptions, IGlobOpti
 export declare type AudioElement = HTMLAudioElement | {
     context: AudioContext;
     source: MediaElementAudioSourceNode | MediaStreamAudioSourceNode;
-};
+} | AnalyserNode;
 export declare class Wave {
     animations: {
         Arcs: typeof Arcs;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@foobar404/wave",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Audio visualizer library for javascript.",
   "main": "dist/bundle.js",
   "scripts": {

diff --git a/src/index.ts b/src/index.ts
@@ -28,7 +28,8 @@ export type AudioElement =
     | {
           context: AudioContext;
           source: MediaElementAudioSourceNode | MediaStreamAudioSourceNode;
-      };
+      }
+    | AnalyserNode;
 
 export class Wave {
     public animations = {
@@ -47,8 +48,8 @@ export class Wave {
     private _audioElement: HTMLAudioElement;
     private _canvasElement: HTMLCanvasElement;
     private _canvasContext: CanvasRenderingContext2D;
-    private _audioContext: AudioContext;
-    private _audioSource: MediaElementAudioSourceNode | MediaStreamAudioSourceNode;
+    private _audioContext: AudioContext | null;
+    private _audioSource: MediaElementAudioSourceNode | MediaStreamAudioSourceNode | null;
     private _audioAnalyser: AnalyserNode;
     private _muteAudio: boolean;
     private _interacted: boolean;
@@ -79,7 +80,12 @@ export class Wave {
                     { once: true }
                 );
             }
-        } else {
+        } else if (audioElement instanceof AnalyserNode) {
+            this._audioAnalyser = audioElement;
+            this._audioContext = null;
+            this._audioSource = null;
+            this._play();
+        } else if (audioElement) {
             this._audioContext = audioElement.context;
             this._audioSource = audioElement.source;
             this._audioAnalyser = this._audioContext.createAnalyser();
@@ -98,9 +104,11 @@ export class Wave {
     }
 
     private _play(): void {
-        this._audioSource.connect(this._audioAnalyser);
-        if (!this._muteAudio) {
-            this._audioSource.connect(this._audioContext.destination);
+        if (this._audioSource) {
+            this._audioSource.connect(this._audioAnalyser);
+            if (!this._muteAudio) {
+                this._audioSource.connect(this._audioContext.destination);
+            }
         }
         this._audioAnalyser.smoothingTimeConstant = 0.85;
         this._audioAnalyser.fftSize = 1024;

diff --git a/test/analyser.html b/test/analyser.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+        <script src="../dist/bundle.js"></script>
+
+        <style>
+            html,
+            body {
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+
+    <body>
+        <canvas height="200" width="200"></canvas>
+        <audio src="./audio.mp3" controls style="position: fixed; right: 0px"></audio>
+
+        <script>
+            let canvas = document.querySelector("canvas");
+            let audio = document.querySelector("audio");
+
+            const context = new AudioContext();
+            const source = context.createMediaElementSource(document.querySelector("audio"));
+            const analyser = context.createAnalyser();
+
+            source.connect(analyser);
+            analyser.connect(context.destination);
+
+            let wave = new Wave(analyser, canvas);
+
+            canvas.height = window.innerHeight - 30;
+            canvas.width = window.innerWidth - 30;
+
+            wave.addAnimation(new wave.animations.Cubes());
+        </script>
+    </body>
+</html>