@breakfast-dlc/visualize - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+## 0.2.0 (June 20,2021)
+
+-   Updated constructor. Visualizers now only take one optional argument in the constructor, which is an object representing the initial configuration of the visualizer. Any properties that are not specified in the initial configuration are created / set automatically.
+-   Added static helper methods for quickly creating visualizers using audio elements and audio streams.
+
 ## 0.1.1 (June 3, 2021)
@@ -2,0 +7,0 @@

dist/FrequencyCurve.d.ts

@@ -22,3 +22,3 @@ import { AudioVisualizerFillColor } from "./AudioVisualizer";
     fillColor?: AudioVisualizerFillColor;
-    constructor(analyser: AnalyserNode, canvas: HTMLCanvasElement, config?: FrequencyCurveConfig);
+    constructor(config?: FrequencyCurveConfig);
     /**
@@ -25,0 +25,0 @@ * @see AudioVisualizer

dist/FrequencyGraph.d.ts

@@ -27,3 +27,3 @@ import { AudioVisualizer, AudioVisualizerConfig } from "./AudioVisualizer";
     gap: number;
-    constructor(analyser: AnalyserNode, canvas: HTMLCanvasElement, config?: FrequencyGraphConfig);
+    constructor(config?: FrequencyGraphConfig);
     /**
@@ -40,2 +40,7 @@ * Returns frequency data from the analyser
     /**
+     * Returns the max frequency in the frequency spread returned by the analyser node, equal to half
+     * of the audio context sample rate.
+     */
+    protected _getMaxAnalyserFrequency(): number;
+    /**
      * @see AudioVisualizer
@@ -42,0 +47,0 @@ */

dist/FrequencyGraphBlocks.d.ts

@@ -18,3 +18,3 @@ import { FrequencyGraph, FrequencyGraphConfig } from "./FrequencyGraph";
     rowCount?: number;
-    constructor(analyser: AnalyserNode, canvas: HTMLCanvasElement, config?: FrequencyGraphBlocksConfig);
+    constructor(config?: FrequencyGraphBlocksConfig);
     /**
@@ -21,0 +21,0 @@ * @see AudioVisualizer

package.json

 {
     "name": "@breakfast-dlc/visualize",
-    "version": "0.1.1",
-    "description": "Visualize is a library that uses the Web Audio API to create audio visualizations in the browser.",
+    "version": "0.2.0",
+    "description": "Visualize is a library that uses the Web Audio API to create live audio visualizations in the browser.",
     "main": "dist/index.js",
@@ -11,2 +11,12 @@ "types": "dist/index.d.ts",
     "devDependencies": {
+        "@types/chai": "^4.2.18",
+        "@types/mocha": "^8.2.2",
+        "chai": "^4.3.4",
+        "karma": "^6.3.4",
+        "karma-chai": "^0.1.0",
+        "karma-chrome-launcher": "^3.1.0",
+        "karma-cli": "^2.0.0",
+        "karma-mocha": "^2.0.1",
+        "karma-typescript": "^5.5.1",
+        "mocha": "^8.4.0",
         "ts-loader": "^9.1.2",
@@ -20,2 +30,4 @@ "typescript": "^4.2.4",
         "start": "node scripts/start.js",
+        "test": "karma start ",
+        "test:debug": "karma start --log-level debug",
         "build": "node scripts/build.js",
@@ -25,5 +37,7 @@ "publish": "node scripts/publish.js"
     "keywords": [
-        "audio",
-        "visualizer",
-        "music"
+        "Web Audio",
+        "Web Audio API",
+        "Audio Visualizer",
+        "Audio",
+        "Visualizer"
     ],
@@ -30,0 +44,0 @@ "author": "breakfast-dlc",

README.md

@@ -16,3 +16,3 @@ # Visualize
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@breakfast-dlc/visualize@latest/dist/index.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@breakfast-dlc/visualize@0.2.0/dist/index.js"></script>
 ```
@@ -38,15 +38,35 @@
 
-Visualizers require an [AnalyserNode](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode) and a [canvas element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement).
+Visualizers require an [AnalyserNode](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode) and a [canvas element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement). Visualize will automatically create these for you.
 
 ```javascript
-//Get AnalyserNode
+//Create visualizer
+let visual = new Visual.FrequencyGraph();
+
+//Add canvas to document
+let container = document.getElementById("container");
+container.append(visual.canvas);
+
+//Connect audio source to visualizer
+let audio = document.getElementById("audio");
+let mediaSource = visual.audioContext.createMediaElementSource(audio);
+mediaSource.connect(visual.analyser);
+```
+
+You can also assign your own AnalyserNode and canvas element
+
+```javascript
+//Create AnalyserNode
 let audioContext = new window.AudioContext();
 let analyser = audioContext.createAnalyser();
-someMediaSource.connect(analyser);
 
+//Connect audio to analyser
+let audio = document.getElementById("audio");
+let mediaSource = audioContext.createMediaElementSource(audio);
+mediaSource.connect(analyser);
+
 //Get canvas element
 let canvas = document.getElementById("canvas");
 
-//Create Visualizer
-let visual = new Visualize.FrequencyGraphBlocks(analyser, canvas);
+//Create visualizer
+let visual = new Visualize.FrequencyGraphBlocks({ analyser, canvas });
 ```
@@ -58,2 +78,4 @@
 
+-   **analyser** {_AnalyserNode_}: The AnalyserNode the visualizer will use to get data about the audio.
+-   **canvas** {_HTMLCanvasElement_}: The canvas element the visual will use to render the visual.
 -   **fps** {_number_}: The frames per second that the visualition should run at. Defaults to the highest possible fps in the browser, which
@@ -68,3 +90,5 @@ is typically around 60 fps.
 ```javascript
-let visual = Visualize.Oscillope(analyser, canvas);
+let visual = Visualize.Oscillope();
+visual.analyser = customAnalyser;
+visual.canvas = customCanvas;
 visual.lineWidth = 5;
@@ -78,3 +102,5 @@ visual.backgroundColor = ["#333333", "#DDDDDD"];
 ```javascript
-let visual = Visualize.Oscillope(analyser, canvas, {
+let visual = Visualize.Oscillope({
+    analyser: customAnalyser,
+    canvas: customCanvas,
     lineWidth: 5,
@@ -115,3 +141,3 @@ backgroundColor: ["#333333", "#DDDDDD"],
 ```javascript
-let visual = new Visualize.FrequencyCurve(analyser, canvas);
+let visual = new Visualize.FrequencyCurve({ analyser, canvas });
 visual.addCallback("setUpForeground", (canvasContext) => {
@@ -138,20 +164,13 @@ canvasContext.shadowColor = "#CCCCCC";
 ```javascript
-//Create media element source from audio element
-let context = new window.AudioContext();
+//Get audio element
 let audio = document.getElementById("audio");
-let track = context.createMediaElementSource(audio);
-track.connect(context.destination);
 
-//Create analyser node and connect audio to analyser
-let analyser = context.createAnalyser();
-track.connect(analyser);
-
-//Get canvas element
-let canvas = document.getElementById("canvas");
-
 //Create Visualizer
-let visual = new Visualize.FrequencyGraphBlocks(analyser, canvas);
+let visual = new Visualize.FrequencyGraphBlocks.fromMediaElement(audio);
 visual.backgroundColor = ["#333333", "#CCCCCC"];
 visual.color = ["orange", "gold", "yellow"];
 
+//Add canvas to document
+document.getElementById("container").append(visual.canvas);
+
 //Start Audio
@@ -164,4 +183,5 @@ audio.play();
 ```javascript
-let container = document.getElementById("canvas-container");
-let visual = new Visualize.Oscillope(analyser, canvas);
+let container = document.getElementById("container");
+let visual = new Visualize.Oscillope();
+container.append(visual.canvas);
 visual.aspectRatio = {
@@ -176,3 +196,3 @@ width: container.clientWidth,
 ```javascript
-let visual = new Visualize.FrequencyGraph(analyser, canvas);
+let visual = new Visualize.FrequencyGraph({ analyser, canvas });
 
@@ -179,0 +199,0 @@ window.addEventListener("resize", () => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

12

increased by33.33%

Number of lines in readme file

194

increased by11.49%

Worsened metrics

Total package byte prevSize

34567

decreased by-71.51%

Dev dependency count

15

increased by200%

Lines of code

396

decreased by-58.66%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes