nodejs-audio-visualizer 2.0.0 → 2.1.1

package/src/bpmEncoder.ts

@@ -0,0 +1,71 @@
+export interface EncodedBmp {
+  shiftPos: number;
+  rowBytes: number;
+  data: Buffer;
+}
+
+export const createBpmEncoder = (imgData: { width: number; height: number; }) => {
+  const width = imgData.width;
+  const height = imgData.height;
+  const extraBytes = width % 4;
+  const rgbSize = height * (3 * width + extraBytes);
+  const headerInfoSize = 40;
+
+  /******************header***********************/
+  const flag = 'BM';
+  const reserved = 0;
+  const offset = 54;
+  const fileSize = rgbSize + offset;
+  const planes = 1;
+  const bitPP = 24;
+  const compress = 0;
+  const hr = 0;
+  const vr = 0;
+  const colors = 0;
+  const importantColors = 0;
+
+  return (buffer: Buffer): EncodedBmp => {
+    const tempBuffer = Buffer.alloc(offset + rgbSize);
+
+    let pos = 0;
+    tempBuffer.write(flag, pos, 2); pos += 2;
+    tempBuffer.writeUInt32LE(fileSize, pos); pos += 4;
+    tempBuffer.writeUInt32LE(reserved, pos); pos += 4;
+    tempBuffer.writeUInt32LE(offset, pos); pos += 4;
+
+    tempBuffer.writeUInt32LE(headerInfoSize, pos); pos += 4;
+    tempBuffer.writeUInt32LE(width, pos); pos += 4;
+    tempBuffer.writeInt32LE(-height, pos); pos += 4;
+    tempBuffer.writeUInt16LE(planes, pos); pos += 2;
+    tempBuffer.writeUInt16LE(bitPP, pos); pos += 2;
+    tempBuffer.writeUInt32LE(compress, pos); pos += 4;
+    tempBuffer.writeUInt32LE(rgbSize, pos); pos += 4;
+    tempBuffer.writeUInt32LE(hr, pos); pos += 4;
+    tempBuffer.writeUInt32LE(vr, pos); pos += 4;
+    tempBuffer.writeUInt32LE(colors, pos); pos += 4;
+    tempBuffer.writeUInt32LE(importantColors, pos); pos += 4;
+
+    let i = 0;
+    const rowBytes = 3 * width + extraBytes;
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const p = pos + y * rowBytes + x * 3;
+        i++; // a
+        tempBuffer[p] = buffer[i++]; // b
+        tempBuffer[p + 1] = buffer[i++]; // g
+        tempBuffer[p + 2] = buffer[i++]; // r
+      }
+      if (extraBytes > 0) {
+        const fillOffset = pos + y * rowBytes + width * 3;
+        tempBuffer.fill(0, fillOffset, fillOffset + extraBytes);
+      }
+    }
+
+    return {
+      shiftPos: pos,
+      rowBytes,
+      data: tempBuffer
+    };
+  };
+};

package/src/config.ts

@@ -7,7 +7,10 @@ export const defaults = {
   spectrumHeight: '10%',
   spectrumX: 'center',
   spectrumY: 'top',
-  spectrumRotation: 'down'
+  spectrumRotation: 'down',
+  spectrumBusesCount: 64,
+  spectrumBusMargin: 4,
+  spectrumOpacity: '100%',
 };
 
 type RelativePositionValue = 0 | 0.5 | 1;
@@ -43,19 +46,25 @@ export const getOutVideoPath = (config: Config) =>
 export const getFPS = (config: Config) =>
   config.outVideo.fps || defaults.fps;
 
+export const getSpectrumBusesCount = () => defaults.spectrumBusesCount;
+
+export const getSpectrumBusMargin = () => defaults.spectrumBusMargin;
+
 const getSpectrumWidth = (config: Config) =>
   (config.outVideo.spectrum && config.outVideo.spectrum.width) ||
   defaults.spectrumWidth;
 
 const getSpectrumSizeAbsolute = (
-  spectrumSize: SpectrumSizeValue, backgroundImageSize: number
+  spectrumSize: SpectrumSizeValue,
+  backgroundImageSize: number,
+  fieldName: string
 ) => {
   if (typeof spectrumSize === 'number') {
     return spectrumSize;
   }
   const isPercentValue = checkIsPercentValue(spectrumSize);
   if (!isPercentValue) {
-    throw new Error();
+    throw new Error(getSpectrumSizeValueErrorMessage(fieldName, spectrumSize));
   }
   const percentValue = parseInt(spectrumSize) / 100;
   return backgroundImageSize * percentValue;
@@ -70,11 +79,13 @@ export const getSpectrumWidthAbsolute = (
   config: Config, backgroundImageWidth: number
 ) => {
   const spectrumWidth = getSpectrumWidth(config);
-  try {
-    return getSpectrumSizeAbsolute(spectrumWidth, backgroundImageWidth);
-  } catch {
-    throw new Error(getSpectrumSizeValueErrorMessage('width', spectrumWidth));
+  const spectrumWidthAbsolute = getSpectrumSizeAbsolute(spectrumWidth, backgroundImageWidth, 'width');
+  const spectrumWidthWithoutMargin =
+    Math.trunc(spectrumWidthAbsolute / defaults.spectrumBusesCount) - defaults.spectrumBusMargin / 2;
+  if (spectrumWidthWithoutMargin <= 0) {
+    throw new Error(`Spectrum width '${spectrumWidth}' is too small.`);
   }
+  return spectrumWidthAbsolute;
 };
 
 const getSpectrumHeight = (config: Config) =>
@@ -85,11 +96,7 @@ export const getSpectrumHeightAbsolute = (
   config: Config, backgroundImageHeight: number
 ) => {
   const spectrumHeight = getSpectrumHeight(config);
-  try {
-    return getSpectrumSizeAbsolute(spectrumHeight, backgroundImageHeight);
-  } catch {
-    throw new Error(getSpectrumSizeValueErrorMessage('height', spectrumHeight));
-  }
+  return getSpectrumSizeAbsolute(spectrumHeight, backgroundImageHeight, 'height');
 };
 
 const getSpectrumX = (config: Config) =>
@@ -203,7 +210,26 @@ export const getSpectrumRotation = (config: Config): RotationAliasName => {
 };
 
 export const getSpectrumColor = (config: Config) =>
-  (config.outVideo.spectrum && config.outVideo.spectrum.color);
+  config.outVideo.spectrum && config.outVideo.spectrum.color;
+
+export const getSpectrumOpacity = (config: Config) =>
+  (config.outVideo.spectrum && config.outVideo.spectrum.opacity) ||
+  defaults.spectrumOpacity;
+
+export const getSpectrumOpacityParsed = (config: Config) => {
+  const spectrumOpacity = getSpectrumOpacity(config);
+  if (!checkIsPercentValue(spectrumOpacity)) {
+    throw new Error(`Invalid spectrum opacity value: '${spectrumOpacity}'. Use string percent value, for example '80%'.`);
+  }
+  const percentValue = parseInt(spectrumOpacity);
+  if (
+    (percentValue < 0) ||
+    (percentValue > 100)
+  ) {
+    throw new Error(`Invalid spectrum opacity value: '${spectrumOpacity}'. Percent values must be in range from '0%' to '100%'.`);
+  }
+  return percentValue / 100;
+};
 
 export const getFfmpeg_cfr = (config: Config) =>
   config.tweaks && config.tweaks.ffmpeg_cfr;

package/src/image.ts

@@ -1,5 +1,6 @@
 import { RotationAliasName } from './index';
-import { decode, encode, BmpDecoder } from 'bmp-js';
+import { decode, BmpDecoder } from 'bmp-js';
+import { EncodedBmp } from './bpmEncoder';
 import Jimp from 'jimp';
 
 export interface Color {
@@ -18,31 +19,112 @@ interface Size {
   height: number;
 }
 
-export const drawRect = (imageDstBuffer: BmpDecoder, position: Position, size: Size, color: Color) => {
-  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;
+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),
+  };
+};
+
+const getRectPixelColor = (params: {
+  imageDstBuffer: EncodedBmp;
+  pixelIndex: number;
+  color: Color;
+  opacity: number;
+}) => {
+  const {
+    imageDstBuffer,
+    pixelIndex,
+    color,
+    opacity,
+  } = params;
+  if (opacity === 1) {
+    return color;
+  }
+
+  const backgroundPixelColor: Color = {
+    blue: imageDstBuffer.data[pixelIndex],
+    green: imageDstBuffer.data[pixelIndex + 1],
+    red: imageDstBuffer.data[pixelIndex + 2],
+  };
+  const resultColor = mixColors({
+    color,
+    colorOpacity: opacity,
+    backgroundColor: backgroundPixelColor,
+  });
+  return resultColor;
+};
 
-      imageDstBuffer.data[idx + 1] = color.blue;
-      imageDstBuffer.data[idx + 2] = color.green;
-      imageDstBuffer.data[idx + 3] = color.red;
+interface DrawRectPorps {
+  imageDstBuffer: EncodedBmp;
+  position: Position;
+  size: Size;
+  color: Color;
+  opacity: number;
+}
+
+export const drawRect = ({
+  imageDstBuffer,
+  position,
+  size,
+  color,
+  opacity,
+}: DrawRectPorps) => {
+  for (let currY = position.y; currY < position.y + size.height; currY++) {
+    for (let currX = position.x; currX < position.x + size.width; currX++) {
+      const pixelIndex = imageDstBuffer.shiftPos + currY * imageDstBuffer.rowBytes + currX * 3;
+      const pixelColor = getRectPixelColor({
+        imageDstBuffer,
+        pixelIndex,
+        color,
+        opacity,
+      });
+      imageDstBuffer.data[pixelIndex] = pixelColor.blue;
+      imageDstBuffer.data[pixelIndex + 1] = pixelColor.green;
+      imageDstBuffer.data[pixelIndex + 2] = pixelColor.red;
     }
   }
 };
 
-const drawSpectrum = (
-  imageDstBuffer: BmpDecoder,
-  spectrum: number[],
-  size: Size,
-  position: Position,
-  rotation: RotationAliasName,
-  color: Color
-) => {
+interface DrawSpectrumProps {
+  imageDstBuffer: EncodedBmp;
+  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,30 +135,71 @@ 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: EncodedBmp;
+  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(backgroundImageBuffer.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);
 
-export const createImageBuffer = (image: BmpDecoder) => encode(image).data;
-
 export const getImageColor = (image: BmpDecoder): Color => {
   let blueSum = 0;
   let greenSum = 0;

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,
@@ -15,8 +18,9 @@ import {
   getSpectrumRotation
 } from './config';
 import { createAudioBuffer, bufferToUInt8, createSpectrumsProcessor } from './audio';
-import { parseImage, createVisualizerFrame, createImageBuffer, getImageColor, invertColor, Color, convertToBmp } from './image';
+import { parseImage, createVisualizerFrame, getImageColor, invertColor, Color, convertToBmp } from './image';
 import { spawnFfmpegVideoWriter, getProgress, calculateProgress, waitDrain } from './video';
+import { createBpmEncoder } from './bpmEncoder';
 
 export const PCM_FORMAT = {
   bit: 8,
@@ -42,6 +46,7 @@ export interface Config {
       y?: number | PositionAliasName;
       rotation?: RotationAliasName;
       color?: Color | string;
+      opacity?: string;
     }
   };
   tweaks?: {
@@ -81,6 +86,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 +102,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);
@@ -114,21 +121,24 @@ export const renderAudioVisualizer = (config: Config, onProgress?: (progress: nu
     });
     ffmpegVideoWriter.on('exit', (code: number) => resolve(code));
 
+    const bpmEncoder = createBpmEncoder({ width: backgroundImage.width, height: backgroundImage.height });
+    const backgroundImageBuffer = bpmEncoder(backgroundImage.data);
     const processSpectrum = createSpectrumsProcessor(spectrumBusesCount);
     for (let i = 0; i < framesCount; i++) {
       const audioDataParser = () =>
         PCM_FORMAT.parseFunction(audioBuffer, i * audioDataStep, i * audioDataStep + audioDataStep);
       const spectrum = processSpectrum(i, audioDataParser);
-      const frameImage = createVisualizerFrame(
-        backgroundImage,
+      const frameImage = createVisualizerFrame({
+        backgroundImageBuffer,
         spectrum,
-        { width: spectrumWidth, height: spectrumHeight },
-        { x: spectrumX, y: spectrumY },
-        spectrumRotation,
-        spectrumColor
-      );
-      const frameImageBuffer = createImageBuffer(frameImage);
-      const isFrameProcessed = ffmpegVideoWriter.stdin.write(frameImageBuffer);
+        size: { width: spectrumWidth, height: spectrumHeight },
+        position: { x: spectrumX, y: spectrumY },
+        rotation: spectrumRotation,
+        margin: spectrumBusMargin,
+        color: spectrumColor,
+        opacity: spectrumOpacity,
+      });
+      const isFrameProcessed = ffmpegVideoWriter.stdin.write(frameImage.data);
       if (!isFrameProcessed) {
         await waitDrain(ffmpegVideoWriter.stdin);
       }

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: {}