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.1.tar.gz (412.0 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.1-py3-none-any.whl (414.4 kB view details)

Uploaded Python 3

File details

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

File metadata

  • Download URL: streamlit_audio_editor-0.1.1.tar.gz
  • Upload date:
  • Size: 412.0 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.1.tar.gz
Algorithm Hash digest
SHA256 3fddeb91c9b2308cb48dacc4462dc8a1f9bc5799ab6f0655f415bd725c5d8c07
MD5 b82e129216f26cdc9ebe8b1de7768388
BLAKE2b-256 3ae60b31790b3d17f82f66cba8891b4dc79d1d9ce35dd3da5f3212363c60460f

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for streamlit_audio_editor-0.1.1-py3-none-any.whl
Algorithm Hash digest
SHA256 e4eec67d509d7ab58a381a08ad5ff2cd189cd1af2a8c20be8c59cd63d05d1703
MD5 50277102e97a51a5b76f4493273ea96c
BLAKE2b-256 05a9e15b2766c93247db72ab232921a1c362598bd2b31c1df8c5702869a7e8e2

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