Audio Preview

You can play your audio file and preview its info on VS Code.
You can also check waveform and spectrogram.

Supported Audio Files: wav, mp3, aac, ogg, flac, opus, m4a, sph ... etc.

Available on Marketplace: https://marketplace.visualstudio.com/items?itemName=nh-kng.audio-waveform-preview Repository: https://github.com/nh-kng/vscode-audio-preview

Forked from sukumo28/vscode-audio-preview.

Note
Please consider using the built-in audio playback feature as well. When we developed this VS Code extension, VS Code did not bundle ffmpeg and had no audio playback capabilities. However, with updates, a built-in audio playback feature has been added. While this extension has finish its purpose, we will continue to maintain it slowly.

Features

How to preview audio.

• If you want to display only a specific range of graphs, dragging on the graph will re-run analyze on the selected range.

  • By pressing the Ctrl key when dragging, you can select only the time range.
  • By pressing the Shift key when dragging, you can select only the value range.

• If you want to return to the original range, right-click on the graph.

  • Pressing the Ctrl key when right-clicking, reset only the time range.
  • Pressing the Shift key when right-clicking, reset only the value range.

• If you want to specify the numerical values in detail, you can set the values in the analyze tab found in the settings tab.

If this extension does not open by default, edit settings.json like below.

"workbench.editorAssociations": {
    "*.wav": "wavPreview.audioPreview",
    "*.mp3": "wavPreview.audioPreview",
    ...
},

Settings

You can configure these options in settings.json or VS Code's GUI.
Configuration is completely optional.
There is no need to configure anything if you are just using this extension.

You can analyze audio automatically when you open it.

"WavPreview.autoAnalyze": true

You can set the default values for the settings displayed in the settings tab as shown below.
To check all items, please refer to here.

"WavPreview.playerDefault": {
  "initialVolume": 50
}

"WavPreview.analyzeDefault": {
  "spectrogramVisible": false
}

Development

The build and packaging scripts require Node.js 22 or newer. The decoder build additionally requires Docker Desktop (or another Docker installation that can run linux/amd64 images).

Contributions

Feel free to report Isuues and send Pull Requests on github.

If an error occurs and you create an issue, posting the log displayed in VSCode's DevTools to the issue may be useful for development and fix.
VSCode's DevTools can be opened in the following ways.

• Press f12
• Press shift + ctrl + I
• Select Help > Toggle Developer Tools from the menu at the top of the screen

Build

• Clone this repo
• Install dependencies from the lockfile: npm ci
• Build the decoder and its Docker image: npm run decoder:build
• Build development bundles: npm run compile
• Run Extension: f5

The decoder uses the pinned emscripten/emsdk:3.1.17 image, which runs as linux/amd64. Docker Desktop handles the required emulation on Apple Silicon. The FFmpeg and libopus builds use two jobs by default to keep memory usage bounded. If Docker Desktop still runs out of memory, retry with one job:

DECODER_BUILD_JOBS=1 npm run decoder:build

npm run package checks for src/decoder/wasm/decoder.js before starting the production webpack build. The vscode:prepublish lifecycle script calls this same command automatically when vsce packages the extension.

Package and publish

Create an installable VSIX with the official VS Code Extension Manager:

npm run package:vsix
code --install-extension audio-waveform-preview-2.7.0.vsix

The VSIX filename includes the version from package.json. Before updating an existing Marketplace listing, increment that version and keep the lockfile in sync, for example with npm version patch --no-git-tag-version. The publisher value must belong to the Marketplace account doing the release; forks should replace it and update the repository, issue, homepage, and README links to match their own project.

The first Marketplace release can be uploaded from the publisher management page. For automated publishing, follow the official secure publishing authorization guide and use Microsoft Entra ID credentials. Global Azure DevOps PATs are scheduled for retirement on December 1, 2026.

Test

npm run test
This command runs the tests in src directory.

Lint, Format

Linter
npm run lint

Formatter
npm run format
This is automatically applied upon saving due to the settings in the .vscode/settings.json of this project, so there is generally no need to run it manually.

References

Custom Editor: https://code.visualstudio.com/api/extension-guides/custom-editors
Custom Editor Example: https://github.com/microsoft/vscode-extension-samples/tree/main/custom-editor-sample