How to Build ChatGPT-Style Recording Waveform: Fixed 30-Second, Right-Anchored Waveform

[tayloraucoin]

Hi team,

I’m trying to create a rolling audio-recording waveform in WaveSurfer that mimics ChatGPT’s speech recorder UI. The key requirements are:

1. Fixed 30-Second Window: Once the recording exceeds 30 seconds, older data scrolls off the left, so the view never extends beyond 30 seconds.
2. Right-Anchored / Latest Audio on the Right: New bars appear on the far right, while older data is pushed off to the left.

Reference (ChatGPT’s Version):
https://github.com/user-attachments/assets/95073357-864a-43fa-be83-a6f7acbee1e5

I’ve tried various approaches using the Record plugin, continuousWaveform, scrollingWaveform, manual transforms (scaleX(-1)), and custom scrolling, but so far I can’t get a truly locked 30-second window that’s anchored to the right. WaveSurfer either extends indefinitely or flips in unexpected ways.

Is there a recommended way to configure WaveSurfer/RecordPlugin for this fixed 30-second, right-anchored rolling window?
If not natively supported, are there any workarounds or recommended customizations to replicate ChatGPT’s style using WaveSurfer?

Thanks in advance for any help or guidance!

[katspaugh]

You can fork the Record plugin and implement it yourself.