Skip to main content

A browser-based audio editor component for Streamlit — trim, gain, loop, export WAV

Project description

streamlit-audio-editor

A browser-based audio editor component for Streamlit. Load any audio file, visualize the waveform, trim with draggable handles, adjust gain, loop a region, and export a clean WAV — all client-side via the Web Audio API, no ffmpeg or server processing required.

Audio editor screenshot

Features

  • Waveform rendering from raw PCM via Web Audio API decodeAudioData
  • Draggable IN/OUT trim handles directly on the waveform canvas
  • Click-to-seek, live animated playhead
  • Loop mode with correct loopStart / loopEnd on the AudioBufferSourceNode
  • Zoom (scroll wheel or ±) + horizontal scrollbar for long files
  • Gain slider — live update via GainNode, no re-render
  • Export: slices raw PCM, encodes 16-bit WAV in the browser, previews inline, provides download
  • Supports MP3, WAV, OGG, M4A, FLAC — anything the browser can decode
  • Zero server-side dependencies (no ffmpeg, no pydub)

Installation

pip install streamlit-audio-editor

Quickstart

import base64
import streamlit as st
from streamlit_audio_editor import st_audio_editor

st.title("Audio Editor")

result = st_audio_editor(key="editor")

if result:
    st.success(
        f"Trimmed {result['trimStart']:.2f}s → {result['trimEnd']:.2f}s "
        f"({result['trimEnd'] - result['trimStart']:.2f}s)"
    )
    wav_bytes = base64.b64decode(result["wavBase64"])
    st.audio(wav_bytes, format="audio/wav")
    st.download_button("Download trimmed WAV", wav_bytes, "trimmed.wav", "audio/wav")

Pre-loading a file

# Load from a URL
result = st_audio_editor(audio_url="https://example.com/sample.mp3", key="editor")

# Load from a local file via data URI
with open("sample.wav", "rb") as f:
    import base64
    b64 = base64.b64encode(f.read()).decode()
result = st_audio_editor(audio_url=f"data:audio/wav;base64,{b64}", key="editor")

API

st_audio_editor(audio_url=None, key=None)
Parameter Type Description
audio_url str | None URL or data-URI to pre-load
key str Streamlit widget key

Returns dict on export:

{
    "trimStart": float,   # trim in-point, seconds
    "trimEnd":   float,   # trim out-point, seconds
    "duration":  float,   # total file duration, seconds
    "gain":      float,   # gain multiplier (0.0 – 2.0)
    "wavBase64": str,     # base64-encoded 16-bit PCM WAV of the trimmed region
}

Returns None before the user clicks Export.

Development

git clone https://github.com/RhythrosaLabs/streamlit-audio-editor
cd streamlit-audio-editor

cd streamlit_audio_editor/frontend
npm install
npm start   # dev server on :3002

# separate terminal
cd ../..
pip install -e .
# Set _RELEASE = False in streamlit_audio_editor/__init__.py
streamlit run example.py

License

MIT

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

streamlit_audio_editor-0.1.0.tar.gz (412.1 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

streamlit_audio_editor-0.1.0-py3-none-any.whl (414.5 kB view details)

Uploaded Python 3

File details

Details for the file streamlit_audio_editor-0.1.0.tar.gz.

File metadata

  • Download URL: streamlit_audio_editor-0.1.0.tar.gz
  • Upload date:
  • Size: 412.1 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.2.0 CPython/3.11.9

File hashes

Hashes for streamlit_audio_editor-0.1.0.tar.gz
Algorithm Hash digest
SHA256 3aaa40d09c42b2c11a76588b034ba1e5da19d7f4421f04dfbdf3f7c281826ac8
MD5 99b34633bd3c1fa08e0ed386999ab372
BLAKE2b-256 223a109a50d4a8f907ab9db7b3b92bacd38e20f0e20f19ecf5589792712d8145

See more details on using hashes here.

File details

Details for the file streamlit_audio_editor-0.1.0-py3-none-any.whl.

File metadata

File hashes

Hashes for streamlit_audio_editor-0.1.0-py3-none-any.whl
Algorithm Hash digest
SHA256 2e63bf56e2cf48d3f33763673968609853f1fd159e73ca77ca25dfa038921df5
MD5 c2a21ba9dee9e9734810ff121b051c2d
BLAKE2b-256 520f0171a3e375c394a2180a7d0b9870872dfbd7a35d544032316be2c99d616e

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page