# Streamlit Bar Visualizer
Audio frequency visualizer component for Streamlit, inspired by ElevenLabs UI design.
## Installation
```bash
pip install streamlit-bar-visualizer
```
## Quick Start
```python
import streamlit as st
from streamlit_bar_visualizer import bar_visualizer
import time
st.title("🎵 Audio Stream Visualizer Test")
# Session state
if 'play_count' not in st.session_state:
st.session_state.play_count = 0
# Audio stream options
stream_options = {
"Radio Paradise (MP3)": "https://stream.radioparadise.com/mp3-128",
"BBC World Service": "https://stream.live.vc.bbcmedia.co.uk/bbc_world_service",
"Custom URL": "custom"
}
selected_stream = st.selectbox("Select Audio Stream", list(stream_options.keys()))
if selected_stream == "Custom URL":
stream_url = st.text_input("Enter Audio Stream URL", value="https://stream.radioparadise.com/mp3-128")
else:
stream_url = stream_options[selected_stream]
st.info(f"🎧 Current Audio Stream: {stream_url}")
# Display visualizer
if stream_url:
bar_visualizer(
state="auto",
stream_url=stream_url,
key=f"visualizer_{st.session_state.play_count}"
)
st.markdown("---")
st.caption("💡 Tip: If you don't hear sound, check the browser console (F12) for error messages and verify the audio stream URL is valid.")
```
> ⚠️ **Browser Compatibility Warning**: Safari may have issues with audio streaming due to CORS restrictions. For best results, use **Chrome** or **Firefox**.
## API
### `bar_visualizer(state, stream_url, key)`
**Parameters:**
- `state` (str): Animation state
- `"listening"` - Breathing animation
- `"speaking"` - Active speaking animation
- `"thinking"` - Pulsing animation
- `"connecting"` - Wave animation
- `"initializing"` - Building up animation
- `"auto"` - Auto-switch based on audio playback (thinking → speaking → initializing)
- `stream_url` (str, optional): Audio stream URL to visualize
- `key` (str, optional): Unique component identifier
**Returns:** Current component state (str)
## Development
```bash
# Install dependencies
cd streamlit_bar_visualizer/frontend
npm install
# Start dev server
npm run start
# Build for production
npm run build
```
## License
MIT
Raw data
{
"_id": null,
"home_page": "https://github.com/bensonbs/streamlit-bar-visualizer",
"name": "streamlit-bar-visualizer",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "streamlit, audio, visualizer, frequency, component",
"author": "Benson Sung",
"author_email": "Benson Sung <benson.bs.sung@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/46/5e/28c555fb72b81f50844bfd3b87debaf4cc881be30c7f0732994d0dae8445/streamlit_bar_visualizer-0.1.4.tar.gz",
"platform": null,
"description": "# Streamlit Bar Visualizer\n\nAudio frequency visualizer component for Streamlit, inspired by ElevenLabs UI design.\n\n\n\n\n## Installation\n\n```bash\npip install streamlit-bar-visualizer\n```\n\n## Quick Start\n\n```python\nimport streamlit as st\nfrom streamlit_bar_visualizer import bar_visualizer\nimport time\n\nst.title(\"\ud83c\udfb5 Audio Stream Visualizer Test\")\n\n# Session state\nif 'play_count' not in st.session_state:\n st.session_state.play_count = 0\n\n# Audio stream options\nstream_options = {\n \"Radio Paradise (MP3)\": \"https://stream.radioparadise.com/mp3-128\",\n \"BBC World Service\": \"https://stream.live.vc.bbcmedia.co.uk/bbc_world_service\",\n \"Custom URL\": \"custom\"\n}\n\nselected_stream = st.selectbox(\"Select Audio Stream\", list(stream_options.keys()))\n\nif selected_stream == \"Custom URL\":\n stream_url = st.text_input(\"Enter Audio Stream URL\", value=\"https://stream.radioparadise.com/mp3-128\")\nelse:\n stream_url = stream_options[selected_stream]\n\nst.info(f\"\ud83c\udfa7 Current Audio Stream: {stream_url}\")\n\n# Display visualizer\nif stream_url:\n bar_visualizer(\n state=\"auto\",\n stream_url=stream_url,\n key=f\"visualizer_{st.session_state.play_count}\"\n )\n \nst.markdown(\"---\")\nst.caption(\"\ud83d\udca1 Tip: If you don't hear sound, check the browser console (F12) for error messages and verify the audio stream URL is valid.\")\n```\n\n> \u26a0\ufe0f **Browser Compatibility Warning**: Safari may have issues with audio streaming due to CORS restrictions. For best results, use **Chrome** or **Firefox**.\n\n## API\n\n### `bar_visualizer(state, stream_url, key)`\n\n**Parameters:**\n- `state` (str): Animation state\n - `\"listening\"` - Breathing animation\n - `\"speaking\"` - Active speaking animation\n - `\"thinking\"` - Pulsing animation\n - `\"connecting\"` - Wave animation\n - `\"initializing\"` - Building up animation\n - `\"auto\"` - Auto-switch based on audio playback (thinking \u2192 speaking \u2192 initializing)\n- `stream_url` (str, optional): Audio stream URL to visualize\n- `key` (str, optional): Unique component identifier\n\n**Returns:** Current component state (str)\n\n## Development\n\n```bash\n# Install dependencies\ncd streamlit_bar_visualizer/frontend\nnpm install\n\n# Start dev server\nnpm run start\n\n# Build for production\nnpm run build\n```\n\n## License\n\nMIT\n\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Beautiful audio frequency visualizer component for Streamlit with multiple state animations",
"version": "0.1.4",
"project_urls": {
"Homepage": "https://github.com/bensonbs/streamlit-bar-visualizer",
"Issues": "https://github.com/bensonbs/streamlit-bar-visualizer/issues",
"Repository": "https://github.com/bensonbs/streamlit-bar-visualizer"
},
"split_keywords": [
"streamlit",
" audio",
" visualizer",
" frequency",
" component"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "d478c02af756effd56d601a3f1a5eaca20e2b85ec39ed82748ece5fca00f44fb",
"md5": "4ddc6af28ab313addc5bd91a96ad6bde",
"sha256": "9f0788810ded55b8653438eab7d9fd3ba22a991e0278a32a08619121f05a57c1"
},
"downloads": -1,
"filename": "streamlit_bar_visualizer-0.1.4-py3-none-any.whl",
"has_sig": false,
"md5_digest": "4ddc6af28ab313addc5bd91a96ad6bde",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 99737,
"upload_time": "2025-10-10T15:22:27",
"upload_time_iso_8601": "2025-10-10T15:22:27.830625Z",
"url": "https://files.pythonhosted.org/packages/d4/78/c02af756effd56d601a3f1a5eaca20e2b85ec39ed82748ece5fca00f44fb/streamlit_bar_visualizer-0.1.4-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "465e28c555fb72b81f50844bfd3b87debaf4cc881be30c7f0732994d0dae8445",
"md5": "30f93651e722ad844463246e8bbc52fd",
"sha256": "a9ba53f2d8883b1de42e14f4be6162591ed2fc25b233c87275110e279edf0ae6"
},
"downloads": -1,
"filename": "streamlit_bar_visualizer-0.1.4.tar.gz",
"has_sig": false,
"md5_digest": "30f93651e722ad844463246e8bbc52fd",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 100650,
"upload_time": "2025-10-10T15:22:29",
"upload_time_iso_8601": "2025-10-10T15:22:29.031344Z",
"url": "https://files.pythonhosted.org/packages/46/5e/28c555fb72b81f50844bfd3b87debaf4cc881be30c7f0732994d0dae8445/streamlit_bar_visualizer-0.1.4.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-10-10 15:22:29",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "bensonbs",
"github_project": "streamlit-bar-visualizer",
"github_not_found": true,
"lcname": "streamlit-bar-visualizer"
}
JSON
