Audio Sprite Viewer

Browse audio sprite sheets and hear individual cues, without leaving VS Code.

Every sprite sheet in the workspace shows up in a sidebar tree. Click one, then click a cue to hear just that sound — no game launch, no scrubbing through a five-minute file.

Usage

1. Open a project that contains audio sprite sheets.
2. Click the Audio Sprite Viewer icon in the Activity Bar.
3. Click a sheet.
4. Click a cue in the list, or a region in the waveform.

Use the refresh button in the view title after adding or re-exporting assets.

Controls

How It Works

Finds your sheets wherever they live. What makes a JSON file a sprite sheet is its contents, not its name, so discovery reads the file rather than matching a path. Audio files narrow the field first — a sheet always ships beside the audio it indexes — and only the survivors are parsed. On a repository of 2,000 JSON files that means reading about 20. audio.json, sounds.json, and whatever your project calls it all work, in whatever folder you keep them.

Waveform, zoomed to the cue. A 192ms button click is four tenths of a pixel wide across a six-minute sheet. So there are two: a strip showing the whole sheet with every cue boundary marked, and below it a panel zoomed to the cue in hand, with a playhead crossing it as it plays.

Hear it as the game plays it. The volume slider is a multiplier over each cue's own volume from the sheet's config, so at 100% nothing is louder or quieter here than it is in the build — and moving it does not get undone by the next cue you click. The loop and vol badges say which cues the game itself loops and attenuates.

Fast on large repositories. Only paths are collected up front; a sheet is read the moment you click it, and the audio is streamed rather than decoded whole.

Nothing to install. No runtime to bundle, no build step, no dependency on what your workspace happens to have installed. The whole extension is three files of plain JavaScript and CSS.

Try It

The repository ships two demo sheets under examples/ — 28 synthesised sounds across a pirate game and a space game. Clone it, open the folder in VS Code, and they appear in the sidebar.

Sheet Format

The Howler / audiosprite shape, which is what most tools emit:

{
  "src": ["./assets/audio/audio.ogg", "./assets/audio/audio.mp3"],
  "sprite": {
    "ui_click":     [10500, 80],
    "music_battle": [3000, 3636, true]
  },
  "config": {
    "cannon_fire": { "volume": 0.8 }
  }
}

sprite maps a cue name to [start, duration] in milliseconds, with an optional third value marking a looping cue. config is optional. Any file with a sprite object of that shape is recognised.

src is written for the web server's document root rather than the sheet's own folder, so the file name is what gets resolved — beside the sheet first, then the literal path, then any audio in the same folder. Whichever listed format your editor can decode is the one that plays, so .ogg, .mp3, .m4a, .wav, .webm, .aac, .flac, and .opus all work.

Asset Discovery

Folders named node_modules, .git, dist, build, out, coverage, storybook-static, .svelte-kit, .next, .nuxt, .cache, test-results, and playwright-report are skipped, so build output does not show up as a duplicate of the source sheet.

The tree drops the path segments every sheet shares — at the front and at the back alike, since apps/<game>/static/assets/audio/audio.json says only <game> — and folds away folders that hold a single sheet. Where two sheets would end up with the same row, the file name is added back.

Troubleshooting

The sidebar is empty. The sheet has to sit in the same folder as its audio, and its sprite values have to be [number, number] pairs. Check the Audio Sprite Viewer output channel for how many sheets were found.

"Reading waveform…" never finishes. The audio could not be decoded — check the output channel. Playback does not depend on the waveform, so cues still work.

A cue plays the wrong sound. The sheet's timings and the audio file have drifted apart; re-export both together.

Known Limitations

• Only the first channel is drawn — stereo sheets show a mono waveform.
• Looping restarts by seeking, so there is a short seam rather than a gapless loop.
• Cues cannot be exported to separate files yet.

License

MIT. See LICENSE.