nodejs-audio-visualizer 2.0.0 → 2.1.0

package/src/image.ts

@@ -18,31 +18,94 @@ interface Size {
   height: number;
 }
 
-export const drawRect = (imageDstBuffer: BmpDecoder, position: Position, size: Size, color: Color) => {
+interface MixColorProps {
+  color: Color;
+  colorOpacity: number;
+  backgroundColor: Color;
+}
+
+export const mixValues =(value1: number, value1Opacity: number, value2: number) =>
+  Math.round(value2 * (1 - value1Opacity) + value1 * value1Opacity);
+
+export const mixColors = ({
+  color,
+  colorOpacity,
+  backgroundColor,
+}: MixColorProps): Color => {
+  return {
+    red: mixValues(color.red, colorOpacity, backgroundColor.red),
+    green: mixValues(color.green, colorOpacity, backgroundColor.green),
+    blue: mixValues(color.blue, colorOpacity, backgroundColor.blue),
+  };
+};
+
+interface DrawRectPorps {
+  imageDstBuffer: BmpDecoder;
+  position: Position;
+  size: Size;
+  color: Color;
+  opacity: number;
+}
+
+export const drawRect = ({
+  imageDstBuffer,
+  position,
+  size,
+  color,
+  opacity,
+}: DrawRectPorps) => {
   for (var currY = position.y; currY < position.y + size.height; currY++) {
     for (var currX = position.x; currX < position.x + size.width; currX++) {
       var idx = (imageDstBuffer.width * currY + currX) << 2;
-
-      imageDstBuffer.data[idx + 1] = color.blue;
-      imageDstBuffer.data[idx + 2] = color.green;
-      imageDstBuffer.data[idx + 3] = color.red;
+      if (opacity === 1) {
+        imageDstBuffer.data[idx + 1] = color.blue;
+        imageDstBuffer.data[idx + 2] = color.green;
+        imageDstBuffer.data[idx + 3] = color.red;
+        continue;
+      }
+
+      const backgroundPixelColor: Color = {
+        red: imageDstBuffer.data[idx + 3],
+        green: imageDstBuffer.data[idx + 2],
+        blue: imageDstBuffer.data[idx + 1],
+      };
+      const resultColor = mixColors({
+        color,
+        colorOpacity: opacity,
+        backgroundColor: backgroundPixelColor,
+      });
+      imageDstBuffer.data[idx + 1] = resultColor.blue;
+      imageDstBuffer.data[idx + 2] = resultColor.green;
+      imageDstBuffer.data[idx + 3] = resultColor.red;
     }
   }
 };
 
-const drawSpectrum = (
-  imageDstBuffer: BmpDecoder,
-  spectrum: number[],
-  size: Size,
-  position: Position,
-  rotation: RotationAliasName,
-  color: Color
-) => {
+interface DrawSpectrumProps {
+  imageDstBuffer: BmpDecoder;
+  spectrum: number[];
+  size: Size;
+  position: Position;
+  rotation: RotationAliasName;
+  margin: number;
+  color: Color;
+  opacity: number;
+}
+
+const drawSpectrum = ({
+  imageDstBuffer,
+  spectrum,
+  size,
+  position,
+  rotation,
+  margin,
+  color,
+  opacity,
+}: DrawSpectrumProps) => {
   const busWidth = Math.trunc(size.width / spectrum.length);
   const left = Math.trunc(position.x);
   const top = Math.trunc(position.y);
   const height = Math.trunc(size.height);
-  const margin = 4;
 
   for (let spectrumX = 0; spectrumX < spectrum.length; spectrumX++) {
     const spectrumValue = spectrum[spectrumX];
@@ -53,24 +116,66 @@ const drawSpectrum = (
     const rectX = left + busWidth * spectrumX;
     const rectHeight = Math.trunc(height * spectrumValue);
     const rectY = (rotation === 'up') ? top + height - rectHeight : top;
-    drawRect(imageDstBuffer, { x: rectX + margin, y: rectY }, { width: busWidth - margin / 2, height: rectHeight }, color);
+    drawRect({
+      imageDstBuffer,
+      position: { x: rectX + margin, y: rectY },
+      size: { width: busWidth - margin / 2, height: rectHeight },
+      color,
+      opacity,
+    });
   }
 };
 
-export const createVisualizerFrame = (backgroundImageBuffer: BmpDecoder, spectrum: number[], size: Size, position: Position, rotation: RotationAliasName, color: Color | string) => {
-  const image = Object.assign({}, backgroundImageBuffer);
-  image.data = Buffer.from(image.data);
+interface CreateVisualizerFrameProps {
+  backgroundImageBuffer: BmpDecoder;
+  spectrum: number[];
+  size: Size;
+  position: Position;
+  rotation: RotationAliasName;
+  margin: number;
+  color: Color | string;
+  opacity: number;
+}
+
+export const createVisualizerFrame = ({
+  backgroundImageBuffer,
+  spectrum,
+  size,
+  position,
+  rotation,
+  margin,
+  color,
+  opacity,
+}: CreateVisualizerFrameProps) => {
+  const imageDstBuffer = Object.assign({}, backgroundImageBuffer);
+  imageDstBuffer.data = Buffer.from(imageDstBuffer.data);
   const rgbSpectrumColor = (typeof color === 'string') ? hexToRgb(color) : color;
-  drawSpectrum(image, spectrum, size, position, rotation, rgbSpectrumColor);
-  return image;
+  drawSpectrum({
+    imageDstBuffer,
+    spectrum,
+    size,
+    position,
+    rotation,
+    margin,
+    color: rgbSpectrumColor,
+    opacity,
+  });
+  return imageDstBuffer;
 };
 
 export const convertToBmp = async (filePath: string) =>
-  new Promise<Buffer>(async resolve => {
-    const image = await Jimp.read(filePath);
-    image.getBuffer("image/bmp", (err, value) => {
-      resolve(value);
-    });
+  new Promise<Buffer>(async (resolve, reject) => {
+    try {
+      const image = await Jimp.read(filePath);
+      image.getBuffer("image/bmp", (err, value) => {
+        if (err) {
+          reject(err);
+        }
+        resolve(value);
+      });
+    } catch {
+      throw new Error(`Cannot procces image file from path: ${filePath}`);
+    }
   });
 
 export const parseImage = (buffer: Buffer) => decode(buffer);

package/src/index.ts

@@ -3,11 +3,14 @@ import {
   getBackgroundImagePath,
   getOutVideoPath,
   getFPS,
+  getSpectrumBusesCount,
+  getSpectrumBusMargin,
   getSpectrumWidthAbsolute,
   getSpectrumHeightAbsolute,
   getSpectrumXAbsolute,
   getSpectrumYAbsolute,
   getSpectrumColor,
+  getSpectrumOpacityParsed,
   getFfmpeg_cfr,
   getFfmpeg_preset,
   getFrame_processing_delay,
@@ -42,6 +45,7 @@ export interface Config {
       y?: number | PositionAliasName;
       rotation?: RotationAliasName;
       color?: Color | string;
+      opacity?: string;
     }
   };
   tweaks?: {
@@ -81,6 +85,8 @@ export const renderAudioVisualizer = (config: Config, onProgress?: (progress: nu
       throw new Error('ffmpeg didn\'t show audio sample rate');
     }
 
+    const spectrumBusesCount = getSpectrumBusesCount();
+    const spectrumBusMargin = getSpectrumBusMargin();
     const FPS = getFPS(config);
     const spectrumWidth =
       getSpectrumWidthAbsolute(config, backgroundImage.width);
@@ -95,10 +101,10 @@ export const renderAudioVisualizer = (config: Config, onProgress?: (progress: nu
     const spectrumColor =
       getSpectrumColor(config) ||
       invertColor(getImageColor(backgroundImage));
+    const spectrumOpacity = getSpectrumOpacityParsed(config);
     const ffmpeg_cfr = getFfmpeg_cfr(config);
     const ffmpeg_preset = getFfmpeg_preset(config);
     const frame_processing_delay = getFrame_processing_delay(config);
-    const spectrumBusesCount = 64;
 
     const audioDuration = audioBuffer.length / sampleRate;
     const framesCount = Math.trunc(audioDuration * FPS);
@@ -119,14 +125,16 @@ export const renderAudioVisualizer = (config: Config, onProgress?: (progress: nu
       const audioDataParser = () =>
         PCM_FORMAT.parseFunction(audioBuffer, i * audioDataStep, i * audioDataStep + audioDataStep);
       const spectrum = processSpectrum(i, audioDataParser);
-      const frameImage = createVisualizerFrame(
-        backgroundImage,
+      const frameImage = createVisualizerFrame({
+        backgroundImageBuffer: backgroundImage,
         spectrum,
-        { width: spectrumWidth, height: spectrumHeight },
-        { x: spectrumX, y: spectrumY },
-        spectrumRotation,
-        spectrumColor
-      );
+        size: { width: spectrumWidth, height: spectrumHeight },
+        position: { x: spectrumX, y: spectrumY },
+        rotation: spectrumRotation,
+        margin: spectrumBusMargin,
+        color: spectrumColor,
+        opacity: spectrumOpacity,
+      });
       const frameImageBuffer = createImageBuffer(frameImage);
       const isFrameProcessed = ffmpegVideoWriter.stdin.write(frameImageBuffer);
       if (!isFrameProcessed) {

package/src/tests/config.test.ts

@@ -12,6 +12,8 @@ import {
   getSpectrumXAbsolute,
   getSpectrumYAbsolute,
   getSpectrumColor,
+  getSpectrumOpacity,
+  getSpectrumOpacityParsed,
   getFfmpeg_cfr,
   getFfmpeg_preset,
   getFrame_processing_delay,
@@ -94,6 +96,24 @@ describe('config', function() {
       backgroundImageWidth
     );
     expect(result4).to.throw('Invalid spectrum width value: \'69\'. Use number value or percent value in string, for example: \'30%\'.');
+
+    const result5 = getSpectrumWidthAbsolute.bind(
+      undefined,
+      {
+        outVideo: { spectrum: { width: 1 }}
+      } as Config,
+      backgroundImageWidth
+    );
+    expect(result5).to.throw('Spectrum width \'1\' is too small.');
+
+    const result6 = getSpectrumWidthAbsolute.bind(
+      undefined,
+      {
+        outVideo: { spectrum: { width: '1%' }}
+      } as Config,
+      backgroundImageWidth
+    );
+    expect(result6).to.throw('Spectrum width \'1%\' is too small.');
   });
 
   it('getSpectrumHeightAbsolute', function() {
@@ -267,6 +287,46 @@ describe('config', function() {
     expect(result2).equal('#cccc99');
   });
 
+  it('getSpectrumOpacity', function() {
+    const result1 = getSpectrumOpacity({
+      outVideo: {}
+    } as Config);
+    expect(result1).equal(defaults.spectrumOpacity);
+
+    const result2 = getSpectrumOpacity({
+      outVideo: { spectrum: { opacity: '69%' } }
+    } as Config);
+    expect(result2).equal('69%');
+  });
+
+  it('getSpectrumOpacityParsed', function() {
+    const result1 = getSpectrumOpacityParsed({
+      outVideo: {}
+    } as Config);
+    expect(result1).equal(parseInt(defaults.spectrumOpacity) / 100);
+
+    const result2 = getSpectrumOpacityParsed({
+      outVideo: { spectrum: { opacity: '69%' } }
+    } as Config);
+    expect(result2).equal(0.69);
+
+    const result3 = getSpectrumOpacityParsed.bind(
+      undefined,
+      {
+        outVideo: { spectrum: { opacity: 'fake value' } }
+      } as Config
+    );
+    expect(result3).to.throw('Invalid spectrum opacity value: \'fake value\'. Use string percent value, for example \'80%\'.');
+
+    const result4 = getSpectrumOpacityParsed.bind(
+      undefined,
+      {
+        outVideo: { spectrum: { opacity: '103%' } }
+      } as Config
+    );
+    expect(result4).to.throw('Invalid spectrum opacity value: \'103%\'. Percent values must be in range from \'0%\' to \'100%\'.');
+  });
+
   it('getFfmpeg_cfr', function() {
     const result1 = getFfmpeg_cfr({
       tweaks: {}

package/src/tests/image.test.ts

@@ -1,11 +1,50 @@
 import { expect } from 'chai';
 import path from 'path';
-import { drawRect, Color, createVisualizerFrame, parseImage, convertToBmp } from '../image';
+import fs from 'fs';
+import {
+  drawRect,
+  Color,
+  createVisualizerFrame,
+  parseImage,
+  convertToBmp,
+  mixValues,
+  mixColors,
+} from '../image';
 
 import frameSnapshotSpectrumDown from './snapshots/frameSnapshotSpectrumDown.json';
 import frameSnapshotSpectrumUp from './snapshots/frameSnapshotSpectrumUp.json';
+import frameSnapshotSpectrumUpOpacity50 from './snapshots/frameSnapshotSpectrumUpOpacity50.json';
 
 describe('image', function () {
+  it('mixValues', function () {
+    expect(mixValues(420, 0.69, 96)).equal(320);
+    expect(mixValues(420, 1, 96)).equal(420);
+    expect(mixValues(420, 0, 96)).equal(96);
+  });
+
+  it('mixColors', function () {
+    const result1 = mixColors({
+      color: { red: 123, green: 69, blue: 96 },
+      colorOpacity: 0.24,
+      backgroundColor: { red: 69, green: 123, blue: 42 },
+    });
+    expect(result1).deep.equal({ red: 82, green: 110, blue: 55 });
+
+    const result2 = mixColors({
+      color: { red: 123, green: 69, blue: 96 },
+      colorOpacity: 0,
+      backgroundColor: { red: 69, green: 123, blue: 42 },
+    });
+    expect(result2).deep.equal({ red: 69, green: 123, blue: 42 });
+
+    const result3 = mixColors({
+      color: { red: 123, green: 69, blue: 96 },
+      colorOpacity: 1,
+      backgroundColor: { red: 69, green: 123, blue: 42 },
+    });
+    expect(result3).deep.equal({ red: 123, green: 69, blue: 96 });
+  });
+
   it('drawRect', function () {
     const imageWidth = 10;
     const imageHeight = 10;
@@ -27,7 +66,13 @@ describe('image', function () {
       expectedImageData[pixelIndex + 3] = rectColor.red;
     });
 
-    drawRect(imageDstBuffer as any, { x: rectX, y: rectY }, { width: rectWidth, height: rectHeight }, rectColor);
+    drawRect({
+      imageDstBuffer: imageDstBuffer as any,
+      position: { x: rectX, y: rectY },
+      size: { width: rectWidth, height: rectHeight },
+      color: rectColor,
+      opacity: 1
+    });
     expect(imageDstBuffer.data).deep.equal(expectedImageData);
   });
 
@@ -35,26 +80,43 @@ describe('image', function () {
     const backgroundImagePath = path.resolve('example/media/background.png');
     const backgroundImageBmpBuffer = await convertToBmp(backgroundImagePath);
     const backgroundImage = parseImage(backgroundImageBmpBuffer);
-    const frameSpectrumDown = createVisualizerFrame(
-      backgroundImage,
-      [0.5, 0, 1],
-      { width: 15, height: 20 },
-      { x: 15, y: 0 },
-      'down',
-      { red: 1, green: 1, blue: 1 }
-    );
+    const frameSpectrumDown = createVisualizerFrame({
+      backgroundImageBuffer: backgroundImage,
+      spectrum: [0.5, 0, 1],
+      size: { width: 15, height: 20 },
+      position: { x: 15, y: 0 },
+      rotation: 'down',
+      margin: 4,
+      color: { red: 1, green: 1, blue: 1 },
+      opacity: 1,
+    });
     const resultSpectrumDown = frameSpectrumDown.data.toJSON().data;
     expect(resultSpectrumDown).deep.equal(frameSnapshotSpectrumDown);
 
-    const frameSpectrumUp = createVisualizerFrame(
-      backgroundImage,
-      [0.1, 1, 0],
-      { width: 25, height: 23 },
-      { x: 10, y: 5 },
-      'up',
-      { red: 0, green: 123, blue: 69 }
-    );
+    const frameSpectrumUp = createVisualizerFrame({
+      backgroundImageBuffer: backgroundImage,
+      spectrum: [0.1, 1, 0],
+      size: { width: 25, height: 23 },
+      position: { x: 10, y: 5 },
+      rotation: 'up',
+      margin: 4,
+      color: { red: 0, green: 123, blue: 69 },
+      opacity: 1,
+    });
     const resultSpectrumUp = frameSpectrumUp.data.toJSON().data;
     expect(resultSpectrumUp).deep.equal(frameSnapshotSpectrumUp);
+
+    const frameSpectrumUpOpacity50 = createVisualizerFrame({
+      backgroundImageBuffer: backgroundImage,
+      spectrum: [0.1, 1, 0],
+      size: { width: 25, height: 23 },
+      position: { x: 10, y: 5 },
+      rotation: 'up',
+      margin: 4,
+      color: { red: 0, green: 123, blue: 69 },
+      opacity: 0.5,
+    });
+    const resultSpectrumUpOpacity50 = frameSpectrumUpOpacity50.data.toJSON().data;
+    expect(resultSpectrumUpOpacity50).deep.equal(frameSnapshotSpectrumUpOpacity50);
   });
 });