Plugins

Sonoscope comes with plugins that let you change the visual style of your spectrogram. You can render audio as ASCII text, retro halftone print dots, 3D terrain ridges, or topographic contour lines.

Showcase

ASCII art (`@sonoscope/ascii-spectrogram`)

Draws your spectrogram using terminal characters and text.

npm install @sonoscope/ascii-spectrogram @sonoscope/core

import "@sonoscope/ascii-spectrogram/auto";
import { Sonoscope } from "@sonoscope/core";

const scope = await Sonoscope.fromUrl("/audio/sample.wav");
scope.createSpectrogram(canvas, {
  renderer: "ascii",
  frequencyScale: "mel",
  rendererOptions: {
    colorMode: "green", // "colormap", "monochrome", "green", or "amber"
    fontSize: 10,
  },
});

Halftone dots (`@sonoscope/halftone-spectrogram`)

Draws your spectrogram in a retro comic book print style with dots that grow larger for louder sounds.

npm install @sonoscope/halftone-spectrogram @sonoscope/core

import "@sonoscope/halftone-spectrogram/auto";
import { Sonoscope } from "@sonoscope/core";

const scope = await Sonoscope.fromUrl("/audio/sample.wav");
scope.createSpectrogram(canvas, {
  renderer: "halftone",
  minDb: -100,
  maxDb: -30,
  frequencyScale: "mel",
});

3D terrain (`@sonoscope/terrain-spectrogram`)

Draws your spectrogram as an illuminated 3D landscape with mountain ridges for sound peaks.

npm install @sonoscope/terrain-spectrogram @sonoscope/core

import "@sonoscope/terrain-spectrogram/auto";
import { Sonoscope } from "@sonoscope/core";

const scope = await Sonoscope.fromUrl("/audio/sample.wav");
scope.createSpectrogram(canvas, {
  renderer: "terrain",
  frequencyScale: "mel",
});

Topographic contours (`@sonoscope/topographic-spectrogram`)

Draws elevation lines across your spectrogram, like a topographic map.

npm install @sonoscope/topographic-spectrogram @sonoscope/core

import "@sonoscope/topographic-spectrogram/auto";
import { Sonoscope } from "@sonoscope/core";

const scope = await Sonoscope.fromUrl("/audio/sample.wav");
scope.createSpectrogram(canvas, {
  renderer: "topographic",
  minDb: -100,
  maxDb: -30,
  frequencyScale: "mel",
});