audiomotion-analyzer 5.0.0-alpha.0 → 5.0.0-alpha.1

package/README.md

@@ -80,11 +80,11 @@ const { AudioMotionAnalyzer } = require('audioMotion-analyzer');
 
 ### In the browser using native ES6 module (ESM) <!-- {docsify-ignore} -->
 
-Load from Skypack CDN:
+Load from jsDelivr CDN:
 
 ```html
 <script type="module">
-  import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer@alpha?min';
+  import AudioMotionAnalyzer from 'https://cdn.jsdelivr.net/npm/audiomotion-analyzer@alpha/+esm';
   // your code here
 </script>
 ```
@@ -93,10 +93,10 @@ Or download the [latest version](https://github.com/hvianna/audioMotion-analyzer
 
 ### In the browser using global variable <!-- {docsify-ignore} -->
 
-Load from Unpkg CDN:
+Load from jsDelivr CDN:
 
 ```html
-<script src="https://unpkg.com/audiomotion-analyzer@alpha/dist"></script>
+<script src="https://cdn.jsdelivr.net/npm/audiomotion-analyzer@alpha"></script>
 <script>
   // available as AudioMotionAnalyzer global
 </script>
@@ -1865,7 +1865,7 @@ The `import` statement must be inside a `script` which has the `type="module"` p
 
 ```html
   <script type="module">
-    import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer@alpha?min';
+    import AudioMotionAnalyzer from 'https://cdn.jsdelivr.net/npm/audiomotion-analyzer@alpha/+esm';
 
     // your code here
   </script>

package/dist/index.js

@@ -21,12 +21,12 @@
    * audioMotion-analyzer
    * High-resolution real-time graphic audio spectrum analyzer JS module
    *
-   * @version 5.0.0-alpha.0
+   * @version 5.0.0-alpha.1
    * @author  Henrique Avila Vianna <hvianna@gmail.com> <https://henriquevianna.com>
    * @license AGPL-3.0-or-later
    */
 
-  const VERSION = '5.0.0-alpha.0';
+  const VERSION = '5.0.0-alpha.1';
 
   // internal constants
   const PI = Math.PI,
@@ -2326,16 +2326,21 @@
           _ctx.fill();
         };
 
-        // render a bar of LEDs where each element has a single color (uses: analyzerBottom, isLumi)
+        // render a bar of LEDs where each element has a single color (uses: analyzerBottom, isLumi, ledGap)
         const renderVintageLeds = (colorStops, barCenter, barHeight, barValue) => {
           const colorIndex = isLumi ? 0 : colorStops.findLastIndex(item => ledUnits(barValue) <= ledUnits(item.level)),
             savedStrokeStyle = _ctx.strokeStyle;
-          let last = analyzerBottom;
+          let last = [analyzerBottom, 0]; // lastBottom, lastLedTop
+
           for (let i = colorCount - 1; i >= colorIndex; i--) {
+            let [lastBottom, lastLedTop] = last,
+              ledTop = ledPosY(colorStops[i].level),
+              topY = analyzerBottom - (i == colorIndex ? barHeight : ledTop);
+            if (ledTop == lastLedTop) continue; // no room for this color, skip it (big leds and/or too many colorStops)
+
             _ctx.strokeStyle = colorStops[i].color;
-            let y = analyzerBottom - (i == colorIndex ? barHeight : ledPosY(colorStops[i].level));
-            strokeBar(barCenter, last, y);
-            last = y - ledGap;
+            strokeBar(barCenter, lastBottom, topY);
+            last = [topY - ledGap, ledTop]; // update last used values
           }
           _ctx.strokeStyle = savedStrokeStyle;
         };
@@ -2602,9 +2607,11 @@
               if (showPeakLine) {
                 _ctx[m](...(_radial ? radialXY(x, h) : [x, analyzerBottom - h]));
                 if (_radial && _mirror && !isDualHorizontal) points.push([x, h]);
-              } else if (b.peak[channel] > 0)
+              } else if (b.peak[channel] > 0) {
                 // note: `h` is negative in inner radial
+                if (_peaks == PEAKS_FADE) _ctx.globalAlpha = b.alpha[channel];
                 radialPoly(x, h, 1, -2); // standard peaks (also does mirror)
+              }
             });
             if (showPeakLine) {
               let p;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "audiomotion-analyzer",
   "description": "High-resolution real-time graphic audio spectrum analyzer JavaScript module with no dependencies.",
-  "version": "5.0.0-alpha.0",
+  "version": "5.0.0-alpha.1",
   "main": "./dist/index.js",
   "module": "./src/audioMotion-analyzer.js",
   "types": "./src/index.d.ts",
@@ -43,8 +43,8 @@
   },
   "homepage": "https://audiomotion.dev",
   "devDependencies": {
-    "@babel/cli": "^7.27.2",
-    "@babel/core": "^7.27.4",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
     "@babel/plugin-transform-modules-umd": "^7.27.1"
   }
 }

package/src/audioMotion-analyzer.js

@@ -2,12 +2,12 @@
  * audioMotion-analyzer
  * High-resolution real-time graphic audio spectrum analyzer JS module
  *
- * @version 5.0.0-alpha.0
+ * @version 5.0.0-alpha.1
  * @author  Henrique Avila Vianna <hvianna@gmail.com> <https://henriquevianna.com>
  * @license AGPL-3.0-or-later
  */
 
-const VERSION = '5.0.0-alpha.0';
+const VERSION = '5.0.0-alpha.1';
 
 // internal constants
 const PI      = Math.PI,
@@ -2378,18 +2378,25 @@ class AudioMotionAnalyzer {
 				_ctx.fill();
 			}
 
-			// render a bar of LEDs where each element has a single color (uses: analyzerBottom, isLumi)
+			// render a bar of LEDs where each element has a single color (uses: analyzerBottom, isLumi, ledGap)
 			const renderVintageLeds = ( colorStops, barCenter, barHeight, barValue ) => {
 				const colorIndex       = isLumi ? 0 : colorStops.findLastIndex( item => ledUnits( barValue ) <= ledUnits( item.level ) ),
 					  savedStrokeStyle = _ctx.strokeStyle;
 
-				let last = analyzerBottom;
+				let last = [ analyzerBottom, 0 ]; // lastBottom, lastLedTop
 
 				for ( let i = colorCount - 1; i >= colorIndex; i-- ) {
+					let [ lastBottom, lastLedTop ] = last,
+					 	ledTop = ledPosY( colorStops[ i ].level ),
+						topY   = analyzerBottom - ( i == colorIndex ? barHeight : ledTop );
+
+					if ( ledTop == lastLedTop )
+						continue; // no room for this color, skip it (big leds and/or too many colorStops)
+
 					_ctx.strokeStyle = colorStops[ i ].color;
-					let y = analyzerBottom - ( i == colorIndex ? barHeight : ledPosY( colorStops[ i ].level ) );
-					strokeBar( barCenter, last, y );
-					last = y - ledGap;
+					strokeBar( barCenter, lastBottom, topY );
+
+					last = [ topY - ledGap, ledTop ]; // update last used values
 				}
 
 				_ctx.strokeStyle = savedStrokeStyle;
@@ -2695,8 +2702,12 @@ class AudioMotionAnalyzer {
 							if ( _radial && _mirror && ! isDualHorizontal )
 								points.push( [ x, h ] );
 						}
-						else if ( b.peak[ channel ] > 0 ) // note: `h` is negative in inner radial
+						else if ( b.peak[ channel ] > 0 ) { // note: `h` is negative in inner radial
+							if ( _peaks == PEAKS_FADE )
+								_ctx.globalAlpha = b.alpha[ channel ];
+
 							radialPoly( x, h, 1, -2 ); // standard peaks (also does mirror)
+						}
 					});
 					if ( showPeakLine ) {
 						let p;