nodejs-audio-visualizer 1.2.0 → 2.1.0

package/src/config.ts

@@ -1,14 +1,38 @@
 import path from 'path';
-import { Config } from './index';
+import { Config, SpectrumSizeValue, PositionAliasName, RotationAliasName } from './index';
 
 export const defaults = {
   fps: 60,
-  spectrumWidth: 0.4,
-  spectrumHeight: 0.1
+  spectrumWidth: '40%',
+  spectrumHeight: '10%',
+  spectrumX: 'center',
+  spectrumY: 'top',
+  spectrumRotation: 'down',
+  spectrumBusesCount: 64,
+  spectrumBusMargin: 4,
+  spectrumOpacity: '100%',
 };
 
-const checkIsInt = (num: number) =>
-  num % 1 === 0;
+type RelativePositionValue = 0 | 0.5 | 1;
+
+interface PositionAlias {
+  name: PositionAliasName;
+  value: RelativePositionValue;
+}
+
+const postitionAliases: PositionAlias[] = [
+  { name: 'left', value: 0 },
+  { name: 'center', value: 0.5 },
+  { name: 'right', value: 1 },
+  { name: 'top', value: 0 },
+  { name: 'middle', value: 0.5 },
+  { name: 'bottom', value: 1 },
+];
+
+export const rotationAliasValues = ['up', 'down'] as const;
+
+export const checkIsPercentValue = (value: string) =>
+  RegExp(/\d+%/).test(value)
 
 export const getAudioFilePath = (config: Config) =>
   path.resolve(config.audio.path);
@@ -22,19 +46,46 @@ 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,
+  fieldName: string
+) => {
+  if (typeof spectrumSize === 'number') {
+    return spectrumSize;
+  }
+  const isPercentValue = checkIsPercentValue(spectrumSize);
+  if (!isPercentValue) {
+    throw new Error(getSpectrumSizeValueErrorMessage(fieldName, spectrumSize));
+  }
+  const percentValue = parseInt(spectrumSize) / 100;
+  return backgroundImageSize * percentValue;
+};
+
+const getSpectrumSizeValueErrorMessage = (
+  fieldName: string, value: SpectrumSizeValue
+) =>
+  `Invalid spectrum ${fieldName} value: '${value}'. Use number value or percent value in string, for example: '30%'.`
+
 export const getSpectrumWidthAbsolute = (
   config: Config, backgroundImageWidth: number
 ) => {
   const spectrumWidth = getSpectrumWidth(config);
-  const isAbsoluteValue = checkIsInt(spectrumWidth);
-  if (isAbsoluteValue) {
-    return 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 backgroundImageWidth * spectrumWidth;
+  return spectrumWidthAbsolute;
 };
 
 const getSpectrumHeight = (config: Config) =>
@@ -45,15 +96,140 @@ export const getSpectrumHeightAbsolute = (
   config: Config, backgroundImageHeight: number
 ) => {
   const spectrumHeight = getSpectrumHeight(config);
-  const isAbsoluteValue = checkIsInt(spectrumHeight);
-  if (isAbsoluteValue) {
-    return spectrumHeight;
+  return getSpectrumSizeAbsolute(spectrumHeight, backgroundImageHeight, 'height');
+};
+
+const getSpectrumX = (config: Config) =>
+  parseNumberIfPossible(
+    (config.outVideo.spectrum && config.outVideo.spectrum.x) ||
+    defaults.spectrumX
+  );
+
+const getSpectrumY = (config: Config) =>
+  parseNumberIfPossible(
+    (config.outVideo.spectrum && config.outVideo.spectrum.y) ||
+    defaults.spectrumY
+  );
+
+const parseNumberIfPossible = (value: string | number) => {
+  const parsed = Number(value);
+  if (isNaN(parsed)) {
+    return value;
   }
-  return backgroundImageHeight * spectrumHeight;
+  return parsed;
+};
+
+const parsePositionAlias = (aliasName: string): PositionAlias => {
+  const nameNormalized = aliasName.trim().toLowerCase();
+  const alias = postitionAliases.find(
+    als => als.name === nameNormalized
+  );
+  if (!alias) {
+    throw new Error();
+  }
+  return alias;
+};
+
+const getValidPositionAliasValues = () =>
+  postitionAliases.map(aliasEl => aliasEl.name).join(', ');
+
+const getSpectrumAbsolutePosition = (
+  relativePosition: RelativePositionValue,
+  spectrumSize: number,
+  backgroundImageSize: number
+) => {
+  switch (relativePosition) {
+    case 0:
+      return 0;
+    case 0.5:
+      return relativePosition * backgroundImageSize - spectrumSize / 2;
+    case 1:
+      return relativePosition * backgroundImageSize - spectrumSize;
+    default:
+      throw new Error();
+  }
+};
+
+export const getSpectrumXAbsolute = (
+  config: Config,
+  spectrumWidth: number,
+  backgroundImageWidth: number
+) => {
+  const spectrumX = getSpectrumX(config);
+  if (typeof spectrumX !== 'string') {
+    return spectrumX;
+  }
+  try {
+    const spectrumXParsed = parsePositionAlias(spectrumX);
+    return getSpectrumAbsolutePosition(
+      spectrumXParsed.value,
+      spectrumWidth,
+      backgroundImageWidth
+    );
+  } catch {
+    throw new Error(`Invalid spectrum x value: ${spectrumX}. Valid values: ${getValidPositionAliasValues()}.`);
+  }
+};
+
+export const getSpectrumYAbsolute = (
+  config: Config,
+  spectrumHeight: number,
+  backgroundImageHeight: number
+) => {
+  const spectrumY = getSpectrumY(config);
+  if (typeof spectrumY !== 'string') {
+    return spectrumY;
+  }
+  try {
+    const spectrumXParsed = parsePositionAlias(spectrumY);
+    return getSpectrumAbsolutePosition(
+      spectrumXParsed.value,
+      spectrumHeight,
+      backgroundImageHeight
+    );
+  } catch {
+    throw new Error(`Invalid spectrum y value: ${spectrumY}. Valid values: ${getValidPositionAliasValues()}.`);
+  }
+};
+
+const getValidRotationAliasValues = () =>
+  rotationAliasValues.join(', ');
+
+export const checkIsValidRotationAlias = (aliasName: string) => {
+  return !!rotationAliasValues.find(al => al === aliasName);
+};
+
+export const getSpectrumRotation = (config: Config): RotationAliasName => {
+  const rotationValue =
+    (config.outVideo.spectrum && config.outVideo.spectrum.rotation) ||
+    defaults.spectrumRotation;
+  if (!checkIsValidRotationAlias(rotationValue)) {
+    throw new Error(`Invalid spectrum rotation value: ${rotationValue}. Valid values: ${getValidRotationAliasValues}.`);
+  }
+  return rotationValue as 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,3 +1,4 @@
+import { RotationAliasName } from './index';
 import { decode, encode, BmpDecoder } from 'bmp-js';
 import Jimp from 'jimp';
 
@@ -17,22 +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, color: Color) => {
-  const paddingLeft = Math.trunc(imageDstBuffer.width / 2 - size.width / 2);
+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 margin = 4;
+  const left = Math.trunc(position.x);
+  const top = Math.trunc(position.y);
+  const height = Math.trunc(size.height);
 
   for (let spectrumX = 0; spectrumX < spectrum.length; spectrumX++) {
     const spectrumValue = spectrum[spectrumX];
@@ -40,26 +113,69 @@ const drawSpectrum = (imageDstBuffer: BmpDecoder, spectrum: number[], size: Size
       throw new Error('Spectrum values must be in range from 0 to 1');
     }
 
-    const rectX = paddingLeft + busWidth * spectrumX;
-    const rectHeight = size.height * spectrumValue;
-    drawRect(imageDstBuffer, { x: rectX + margin, y: 0 }, { width: busWidth - margin / 2, height: rectHeight }, color);
+    const rectX = left + busWidth * spectrumX;
+    const rectHeight = Math.trunc(height * spectrumValue);
+    const rectY = (rotation === 'up') ? top + height - rectHeight : top;
+    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, 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, 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,12 +3,19 @@ import {
   getBackgroundImagePath,
   getOutVideoPath,
   getFPS,
+  getSpectrumBusesCount,
+  getSpectrumBusMargin,
   getSpectrumWidthAbsolute,
   getSpectrumHeightAbsolute,
+  getSpectrumXAbsolute,
+  getSpectrumYAbsolute,
   getSpectrumColor,
+  getSpectrumOpacityParsed,
   getFfmpeg_cfr,
   getFfmpeg_preset,
-  getFrame_processing_delay
+  getFrame_processing_delay,
+  rotationAliasValues,
+  getSpectrumRotation
 } from './config';
 import { createAudioBuffer, bufferToUInt8, createSpectrumsProcessor } from './audio';
 import { parseImage, createVisualizerFrame, createImageBuffer, getImageColor, invertColor, Color, convertToBmp } from './image';
@@ -32,9 +39,13 @@ export interface Config {
     path: string;
     fps?: number;
     spectrum?: {
-      width?: number;
-      height?: number;
+      width?: SpectrumSizeValue;
+      height?: SpectrumSizeValue;
+      x?: number | PositionAliasName;
+      y?: number | PositionAliasName;
+      rotation?: RotationAliasName;
       color?: Color | string;
+      opacity?: string;
     }
   };
   tweaks?: {
@@ -44,6 +55,18 @@ export interface Config {
   };
 }
 
+export type SpectrumSizeValue = number | string;
+
+export type PositionAliasName =
+  'left' |
+  'center' |
+  'right' |
+  'top' |
+  'middle' |
+  'bottom';
+
+export type RotationAliasName = typeof rotationAliasValues[number];
+
 const sleep = (timeout: number) =>
   new Promise(resolve => setTimeout(resolve, timeout));
 
@@ -62,18 +85,26 @@ 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);
     const spectrumHeight =
       getSpectrumHeightAbsolute(config, backgroundImage.height);
+    const spectrumX =
+      getSpectrumXAbsolute(config, spectrumWidth, backgroundImage.width);
+    const spectrumY =
+      getSpectrumYAbsolute(config, spectrumHeight, backgroundImage.height);
+    const spectrumRotation =
+      getSpectrumRotation(config);
     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);
@@ -94,12 +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 },
-        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) {