Halftone Shader

@sonoscope/halftone-spectrogram renders your audio with a retro print style. Strong audio signals turn into larger dots, while quiet areas stay sparse.

---

Interactive preview

---

Installation

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

---

Quick start

Importing the /auto path automatically registers the "halftone" renderer keyword:

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

const scope = await Sonoscope.fromUrl("/audio/sample.wav");

scope.createSpectrogram(canvas, {
  renderer: "halftone",
  colorMap: "plasma",
  minDb: -100,
  maxDb: -30,
});

scope.attachNavigation(canvas);

---

Options

Option	Type	Default	What it does
dotFrequency	number	0.24	Density of dots across the canvas
dotAngle	number	45	Grid orientation angle in degrees
minEnergyThreshold	number	0.0	Noise floor cutoff below which no dots appear
energyGamma	number	1.4	Dot growth response curve
maxDotRadius	number	0.7071	Maximum dot radius
dotSoftness	number	0.75	Edge softness multiplier (lower is sharper)
backgroundOpacity	number	1.0	Background opacity (0 to 1)

---

Try it yourself!

Adjust dot angles, frequencies, and softness in the live sandbox: