DeepSeek Harness (DSH)’s better-sidebar does not render audio files by default, and the documentation often lists them as “known binaries with no renderer.” dsh-plugin-better-sidebar-plugin-audio solves this by registering a file previewer with better-sidebar and including a media router that supports HTTP Range requests. It enables audio files of any size to be played directly in the right sidebar, with waveform viewing, progress dragging, and spectrum analysis.

Features

The plugin mainly provides the following capabilities:

  • Waveform rendering
    • Two-layer structure: a pale peak band as the background layer and a darker RMS body as the foreground layer, using different opacities of the same hue to avoid same-color blobs or speckling.
    • Interaction: supports click/drag positioning, mouse-wheel zooming centered on the pointer, Alt+drag for panning, and double-click to fit the full track.
  • Full-track spectrogram
    • Based on STFT (1024-point FFT, Hann window, Mel axis, no interpolation).
    • Shares the time axis with the waveform; zooming and panning trigger detail recalculation for the current viewport rather than simple stretching.
  • Real-time spectrum
    • Generated during playback using FFT (2048 points, logarithmic axis).
    • Provides bar, line, and waterfall style options, or can be disabled.
  • Playback controls
    • Supports play/pause/stop/replay, volume adjustment, and mute.
    • Playback speed range: 0.25x to 3x.
  • Looping and selection
    • Looping: off/full track/selected A-B loop (toggle with L).
    • Selection: Shift+drag to box-select; displays interval duration and peak/RMS dBFS in real time.
  • Large file support
    • Uses HTTP Range for streaming playback without full-file decoding.
    • Automatic decoding handles approximately 176 KB/s; files over 30 minutes long use stream-only playback.
  • Channels and fallbacks
    • Channel switching: mixed/left/right/independent envelopes.
    • Fallback behavior: prompts the user if browser decoding fails, and disables the spectrum if Web Audio is unavailable.

Installation

Install the plugin using the following command. The plugin requires Node.js >= 20.

dsh plugin --profile web add "github:huanlinoto/dsh-plugin-better-sidebar-plugin-audio"

After installation, restart dsh web and perform a hard browser refresh (Ctrl+Shift+R) for the changes to take effect.

Usage

  1. Locate any audio file in the DSH file tree (supports mp3/wav/flac/ogg/m4a/aac/wma/opus).
  2. Click the file to load the player in the right sidebar.
  3. Use the following shortcuts to control playback:
    • Space: play/pause.
    • ← / →: jump ±5s (hold Shift for ±1s).
    • Home / End: jump to the beginning/end.
    • M: mute.
    • L: toggle A-B loop mode.

Notes

  • UI behavior: interface text is not selectable, the readout line height is fixed, and the canvas fills the main area.
  • Theme following: colors are resolved through a probe element by parsing the var() chain to ensure correct display under different skins. The two waveform layers must use different colors.
  • Caching: always perform a hard refresh after installing a new plugin, or the new features may not appear.
  • Dependencies: depends on prebuilt lib/ libraries; installation from GitHub is ready to use out of the box.

Summary

This plugin adds audio preview capability to the DSH environment, uses streaming to address large-file playback issues, and improves the development and debugging experience through refined waveform and spectrum algorithms.