Skip to content

Revamp audio streaming application with new UI and backend#4

Open
Your-Voldemort wants to merge 13 commits into
Mayurkoli8:mainfrom
Your-Voldemort:main
Open

Revamp audio streaming application with new UI and backend#4
Your-Voldemort wants to merge 13 commits into
Mayurkoli8:mainfrom
Your-Voldemort:main

Conversation

@Your-Voldemort

Copy link
Copy Markdown
Contributor

Enhance the audio streaming application by implementing a Python backend for real-time audio capture and streaming, alongside a revamped JavaScript frontend featuring a Cyberpunk theme and improved audio controls. Update project documentation and testing infrastructure to support dual-language testing. Include cross-platform build scripts and licensing information.

- Update .gitignore to reflect new project structure
- Update config.json with refined audio streaming settings
- Update package.json with all required npm dependencies and scripts
- Update package-lock.json with resolved dependency tree
- Update requirements.txt with finalized Python dependencies (Flask, websockets, numpy, sounddevice)
- Update pytest.ini with proper Python test discovery and output formatting
Backend Core Components:
- server.py: Main entry point initializing HTTP server, WebSocket server, and audio capture
- src/config.py: Centralized configuration management (ports, audio format, logging)
- src/connection_manager.py: Manages WebSocket client connections and broadcast state
- src/audio_capture.py: Captures audio from system using sounddevice and manages buffer
- src/http_server.py: Flask HTTP server for serving client HTML and static assets
- src/ws_server.py: WebSocket server (websockets library) for real-time audio streaming
- src/__init__.py: Package initialization

Features:
- Real-time audio capture and streaming via WebSockets
- Automatic client connection management
- Buffer-based audio streaming to prevent data loss
- Configurable audio format and server ports
Frontend Components:
- client.html: Main HTML UI with responsive layout, controls, and visualizer canvas
- static/js/connection.js: WebSocket client managing real-time connection to backend
- static/js/audio.js: Audio decoding (base64 to PCM) and Web Audio API integration
- static/js/ui.js: UI controls (play/pause, status display, connection state)
- static/js/visualizer.js: Real-time frequency visualization using canvas
- static/js/stats.js: Performance metrics (buffer size, sample rate, latency)

Features:
- Real-time WebSocket connection with automatic reconnection
- Audio decoding and streaming playback via Web Audio API
- Live frequency spectrum visualization
- Performance monitoring and statistics display
- Responsive design with dark theme
Test Structure:
- tests/python/: pytest-based backend unit tests
  - test_placeholder.py: Placeholder for audio capture and WebSocket tests
  - properties/__init__.py: Property-based testing support

- tests/javascript/: Jest-based frontend unit tests
  - placeholder.test.js: Placeholder for WebSocket client and audio tests
  - properties/.gitkeep: Property-based testing directory

- tests/__init__.py: Test package initialization

Configuration:
- pytest.ini configured for Python test discovery and output formatting
- package.json includes Jest configuration with JSDOM test environment

Purpose:
- Establish testing framework for continuous validation
- Prepare infrastructure for unit and property-based tests
- Enable CI/CD integration for automated test execution
Files:
- LICENSE: Update project licensing information
- sexy audio.bat: Windows batch script for running the application

Purpose:
- Provide legal licensing information for the project
- Enable cross-platform development with Windows support
- Simplify application startup on different operating systems
Copilot AI review requested due to automatic review settings May 25, 2026 15:25

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR primarily normalizes file formatting (notably line endings), refreshes the client UI/README, and improves backend streaming reliability by moving blocking audio capture off the asyncio event loop and adding basic concurrency protection for client management.

Changes:

  • Offload blocking audio capture to a thread executor in the WebSocket broadcast loop.
  • Add an asyncio.Lock around client dictionary access patterns in the connection manager (partial).
  • Large client UI/README refresh and widespread formatting/line-ending normalization across the repo.

Reviewed changes

Copilot reviewed 5 out of 29 changed files in this pull request and generated 11 comments.

Show a summary per file
File Description
tests/python/test_placeholder.py Formatting/line-ending normalization for pytest placeholder.
tests/python/properties/init.py Line-ending normalization.
tests/python/init.py Line-ending normalization.
tests/javascript/properties/.gitkeep Line-ending normalization.
tests/javascript/placeholder.test.js Formatting/line-ending normalization for Jest placeholder.
tests/init.py Line-ending normalization.
static/js/visualizer.js Line-ending normalization; no functional logic change.
static/js/ui.js Line-ending normalization; no functional logic change.
static/js/stats.js Line-ending normalization; no functional logic change.
static/js/connection.js Line-ending normalization; no functional logic change.
static/js/audio.js Disconnect AudioBufferSourceNode after playback ends to reduce leaks.
src/ws_server.py Run blocking read_block() in executor to avoid blocking the event loop.
src/http_server.py Line-ending normalization; no functional logic change.
src/connection_manager.py Add lock + snapshot strategy for concurrent broadcasts/close operations.
src/config.py Line-ending normalization; no functional logic change.
src/audio_capture.py Line-ending normalization; no functional logic change.
src/init.py Line-ending normalization; no functional logic change.
sexy audio.bat Line-ending normalization; no functional logic change.
server.py Line-ending normalization; no functional logic change.
requirements.txt Line-ending normalization; no dependency change.
pytest.ini Line-ending normalization; no config change.
package.json Line-ending normalization; no config change.
config.json Line-ending normalization; no config change.
client.html Major UI redesign + added inline JS effects.
README.md Project rename/expanded docs + updated run instructions.
LICENSE Line-ending normalization; no license change.
AGENTS.md Add repository “project knowledge base” documentation file.
.gitignore Line-ending normalization; no ignore pattern change.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/ws_server.py
Comment on lines +68 to +72
loop = asyncio.get_event_loop()

while self.is_running:
# Run blocking audio capture in thread pool to avoid blocking event loop
data = await loop.run_in_executor(None, self.audio_capture.read_block)
Comment thread src/connection_manager.py Outdated
Comment on lines +40 to +42
self._lock = asyncio.Lock() # Protect concurrent access to clients dict

def add_client(self, websocket: websockets.WebSocketServerProtocol) -> str:
Comment thread src/connection_manager.py Outdated
client_id = f"{websocket.remote_address[0]}:{websocket.remote_address[1]}"
now = datetime.now()

self.clients[client_id] = ClientInfo(
Comment thread src/connection_manager.py Outdated
last_activity=now,
address=client_id
)
self.total_served += 1
Comment thread src/connection_manager.py
self.logger.info(f"Client connected: {client_id}")
return client_id

def remove_client(self, client_id: str) -> None:
Comment thread src/connection_manager.py Outdated
Comment on lines +128 to +133
# Remove failed clients
async with self._lock:
for client_id in failed_clients:
if client_id in self.clients:
del self.clients[client_id]
self.logger.info(f"Client disconnected: {client_id}")
Comment thread src/config.py
Comment on lines +9 to +11
from dataclasses import dataclass, asdict, field
from pathlib import Path
from typing import Optional
Comment thread src/audio_capture.py Outdated
Comment on lines +8 to +11
from typing import Optional, List, Tuple
import sounddevice as sd
import numpy as np
Comment thread README.md
http://YOUR-PC-IP:5000
```
3. Click the **"Play Stream"** button on the page.
Comment thread client.html

* {
box-sizing: border-box;
cursor: crosshair;
Backend Improvements:
- server.py: Improved initialization and graceful shutdown handling
- src/audio_capture.py: Enhanced audio buffer management and capture error handling
- src/connection_manager.py: Better connection state tracking and cleanup
- src/http_server.py: Improved error responses and logging
- src/ws_server.py: Enhanced message broadcasting and client disconnection handling

Changes:
- More robust error handling and recovery
- Improved logging for debugging and monitoring
- Better resource cleanup on shutdown
- Enhanced performance for real-time audio streaming
Frontend Improvements:
- client.html: Improved layout and accessibility features
- static/js/connection.js: Better connection management and reconnection logic
- static/js/audio.js: Enhanced audio decoding and playback quality
- static/js/ui.js: Improved UI responsiveness and state management
- static/js/visualizer.js: Better frequency visualization and performance

Changes:
- More reliable WebSocket reconnection handling
- Improved audio buffer management
- Enhanced visual feedback for connection states
- Better error messages for debugging
- Optimized rendering performance
Python Backend Tests (pytest):
- test_audio_capture.py: Audio capture functionality and buffer management tests
- test_config.py: Configuration loading and validation tests
- test_connection_manager.py: WebSocket connection management tests
- test_ws_server.py: WebSocket server message handling tests

JavaScript Frontend Tests (Jest):
- audio.test.js: Audio decoding and Web Audio API integration tests
- connection.test.js: WebSocket client connection and reconnection tests
- stats.test.js: Performance statistics calculation tests
- ui.test.js: UI controls and state management tests

Test Coverage:
- Unit tests for core functionality
- Error condition handling
- Integration between modules
- Real-time performance metrics
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants