Audio Sort

A webpage to visualize and audibilize sorting algorithms using javascript.

Development

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

pnpm install --frozen-lockfile
pnpm start

Build with pnpm run build (output: dist/). Run checks with pnpm run check.

See development documentation for browser tests and deployment.

Audio Sort Links

• Live Demo

• Project Page / Comments

• Source Code

• TODO List

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.
• jQuery — Handles DOM updates, UI events, and legacy plugins.
• Bootstrap 2 — Provides the responsive layout, styling, tabs, dropdowns, and modals.
• bootstrap-slider — Stefan Petre's slider controls for audio settings, dataset size, and playback position.
• 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.mjs.

About Sorting Algorithms

• Wikipedia: Sorting Algorithms

• DuckDuckGo: Sorting Algorithms

• c2.com: Sorting Algorithms

Visual

• sorting-algorithms.com

• sortvis.org

• corte.si

• visualsort.appspot.com

• joshuakehn.com

• Youtube: Visualization Of QuickSort

• Visualizing Algorithms by Mike Bostock

• Algorithm Visualizer

• Algorithm Playground

• Data Structure Visualizations

• VisuAlgo

• Illustrated-Algorithms

• Sorting Algorithms Visualised - Blog Post on http://macr.ae/

• Sorting Visualizations on imgur by FishyMcFishFace

• Sorting Algorithms Animations

• Machine Learning visualizer

• Python Algorithm Visualizations

• Morpheus - Visual Algorithm Simulator

• Sorting Visualizer - Karim Elghamry

• SortDemon

• Algorithm Visualizer

Other Audio Web Apps

• Assortment - webcloud.se

• Sounds Of Sorting - caseyrule.com

Audio

• Sound Of Sorting: Downloadable App

• Youtube: 15 Sorting Algorithms in 6 Minutes

• Youtube: 15 Sorting Algorithms charted for Guitar Hero/Clone Hero

• Youtube: What different sorting algorithms sound like

• Youtube: Heapsort audibilization

• Youtube: The Sound of Quicksort

• Youtube: SORTDEMO.BAS

Sorting Out Sorting

• Sorting Out Sorting - Part 1

• Sorting Out Sorting - Part 2

• Sorting Out Sorting - Part 3

• Sorting Out Sorting - Part 4

Implementations

• Sound Of Sorting

• wikibooks.org

• rosettacode.org

• Github User: escherba

• Github User: nzakas

License

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