audio.libx.js - Comprehensive Demo

🎵 Welcome to audio.libx.js

A comprehensive progressive audio streaming library with real-time processing, recording, and caching capabilities. Explore all features using the tabs above.

🎵

Progressive Streaming

Stream audio with MediaSource Extensions, intelligent buffering, and cross-platform compatibility including iOS ManagedMediaSource support.

🎤

Audio Recording

High-quality audio recording with real-time processing, permission management, and configurable quality settings.

⚙️

Audio Processing

Advanced audio processing including silence trimming, format conversion, and audio buffer manipulation.

💾

Intelligent Caching

Persistent IndexedDB storage with memory caching, statistics tracking, and automatic cleanup management.

📊

Real-time Processing

Live audio analysis with effects, silence detection, level monitoring, and visual feedback.

🔒

Permission Management

Cross-browser permission handling with user-friendly error messages and device enumeration.

🚀 Quick Start

Get started with audio.libx.js in just a few lines of code:

// Import the library
import { createAudioStreamer, createAudioRecorder } from 'audio.libx.js';

// Create audio streamer
const audioElement = document.getElementById('audio');
const streamer = createAudioStreamer(audioElement, {
    enableCaching: true,
    enableTrimming: true,
    bufferThreshold: 5
});

// Stream audio
const result = await streamer.streamFromUrl('path/to/audio.mp3');
await result.onLoaded;

// Create audio recorder
const recorder = createAudioRecorder({
    enableRealtimeProcessing: true,
    audioBitsPerSecond: 128000
});

// Start recording
const recording = await recorder.startRecording();
await recording.onStarted;

🌐 Browser Compatibility

✅ Chrome

✅ Firefox

✅ Safari 17.1+

✅ Edge

🎵 Progressive Audio Streaming

Stream audio with progressive loading, intelligent buffering, and persistent caching.

Quick Examples:

Buffer Progress

Ready to stream audio...

📊 Streaming Statistics

0 Cache Entries

0 MB Cache Size

0% Cache Hit Ratio

idle Stream State

⚙️ Configuration

Enable Caching

Enable Silence Trimming

Buffer Threshold: 5s

📋 Event Log

🎤 Audio Recording

Record high-quality audio with real-time processing, level monitoring, and visual feedback.

00:00

Ready to record...

⚙️ Recording Configuration

MIME Type:

Bitrate (kbps):

Max Duration (sec):

Echo Cancellation

Noise Suppression

Auto Gain Control

Real-time Processing

🎵 Recordings

🎤

No recordings yet. Start recording to see them here.

📋 Recording Event Log

⚙️ Audio Processing

Process audio with silence trimming, format conversion, and advanced audio manipulation.

🔇 Silence Trimming

Silence Threshold: -50 dB

Min Silence: 100 ms

🔄 Format Conversion

Output Format:

🏷️ Metadata Processing

Remove ID3 Tags

⏱️ Duration Analysis

Select an audio file to start processing...

📊 Processing Results

0 MB Original Size

0 MB Processed Size

0% Size Reduction

0ms Processing Time

📋 Processing Event Log

💾 Audio Caching System

Manage persistent audio cache with IndexedDB storage and memory optimization.

Cache system ready...

📊 Cache Statistics

0 Total Entries

0 MB Total Size

0% Hit Ratio

0 MB Memory Usage

0 MB Storage Quota

Never Last Cleanup

🗂️ Cache Entries

💾

No cache entries found. Stream some audio to populate the cache.

⚙️ Cache Configuration

Max Cache Size: 100 MB

Max Age: 7 days

Enable Memory Cache

Enable Auto Cleanup

📋 Cache Event Log

📊 Real-time Audio Processing

Live audio analysis with effects, visualization, and real-time processing capabilities.

🔇 Silence

Real-time processing ready...

🎛️ Audio Effects

🔊 Gain Control

Gain: 1.0x

🎚️ Filter

Type:

Frequency: 1000 Hz

🌊 Reverb

Level: 0%

🔄 Echo

Delay: 0 ms

Feedback: 0%

⚙️ Processing Configuration

Silence Detection

Level Monitoring

Silence Threshold: -50 dB

Update Interval: 100 ms

Output Volume: 0.3

📊 Real-time Statistics

0 dB Current Level

0 dB Peak Level

0 dB Average Level

0% Silence %

📋 Real-time Event Log

🔒 Permission Management

Manage microphone permissions with cross-browser compatibility and user-friendly error handling.

Permission status unknown...

📊 Permission Status

unknown Current Status

unknown Browser

0 Audio Devices

No Stream Active

🎤 Available Devices

🎤

Click "List Devices" to enumerate available audio input devices.

⚙️ Constraint Configuration

Device ID:

Sample Rate:

Channels: