[skratchdot.]


Audio Sort

A webpage to visualize and audibilize sorting algorithms using javascript.

Audio Sort

Development

Requires Node.js 24+ and pnpm (version pinned in package.json).

pnpm install --frozen-lockfile
pnpm dev

Open /audio-sort/ on the development server. Build with pnpm run build (output: dist/audio-sort/). Run checks with pnpm run check.

See development documentation for browser tests and deployment.

Built With

  • timbre.js — Synthesizes tones and plays soundfont instruments for sorting playback.
  • D3 — Draws SVG bars, markers, and paths using modular selection, scale, color, shape, and array utilities.
  • Jotai — Stores selected audio and sorting settings independently of the UI.
  • React — Renders settings, playback controls, and editing/export dialogs.
  • TanStack Start — Prerenders the React pages for static hosting.
  • Tailwind CSS — Styles the workspace and its reusable components.
  • shadcn/ui — Provides buttons, dialogs, tabs, and sliders built on Base UI.
  • Lucide — Provides consistent SVG icons for playback and other controls.
  • Ace — Powers the algorithm editor with syntax highlighting and JavaScript diagnostics.
  • jsmidgen — Encodes sorting playback as MIDI files.
  • FileSaver.js — Downloads generated MIDI files in the browser.

See Also / Credits

Musical scale data is adapted from subcollider.js. All 108 scales and the original license notice are preserved in scales.ts.

About Sorting Algorithms

Visual

Other Audio Web Apps

Audio

Sorting Out Sorting

Implementations

License

Copyright (c) 2013 skratchdot
Licensed under the MIT license.