"""
Waveform Visualizer Component
Custom Streamlit component using wavesurfer.js
"""
import streamlit as st
import streamlit.components.v1 as components
def waveform_player(audio_url: str, height: int = 128, wavecolor: str = "#4F46E5", progresscolor: str = "#818CF8"):
"""
Render an interactive waveform player using wavesurfer.js
Args:
audio_url: URL or base64 data URL of the audio file
height: Height of the waveform in pixels
wavecolor: Color of the waveform
progresscolor: Color of the progress indicator
Returns:
None (renders component inline)
"""
html_code = f"""
0:00/0:00
"""
components.html(html_code, height=height + 80)
def waveform_with_regions(audio_url: str, regions: list = None, height: int = 128):
"""
Render waveform with highlighted regions (for word/segment highlighting)
Args:
audio_url: URL of the audio
regions: List of dicts with {start, end, label, color}
height: Waveform height
"""
regions = regions or []
regions_json = str(regions).replace("'", '"')
html_code = f"""
"""
components.html(html_code, height=height + 20)