Back to Examples |

Advanced Media Player

Streaming

A feature-rich media player powered by Flaxon's streaming responses and file serving capabilities.

0:00 / 0:00
🎵 Sample Track 1
🎵 Sample Track 2
🎵 Sample Track 3

Flaxon Streaming Response

from flaxon import Flaxon, StreamingResponse
from pathlib import Path

app = Flaxon("media-backend")

async def stream_media(file_path: str):
    """Stream media file in chunks."""
    async with aiofiles.open(file_path, "rb") as f:
        while chunk := await f.read(8192):
            yield chunk

@app.get("/media/")
async def serve_media(file_path: str):
    path = Path("media") / file_path
    if not path.exists():
        return {"error": "File not found"}, 404

    # Determine content type
    ext = path.suffix.lower()
    content_type = "audio/mpeg"
    if ext == ".mp4":
        content_type = "video/mp4"
    elif ext == ".webm":
        content_type = "video/webm"

    return StreamingResponse(
        stream_media(path),
        media_type=content_type,
        headers={
            "Accept-Ranges": "bytes",
            "Content-Disposition": f'inline; filename="{file_path}"',
        }
    )

Audio Visualization

// Web Audio API Visualizer
const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;

// Connect audio to analyser
const source = audioContext.createMediaElementSource(audioElement);
source.connect(analyser);
analyser.connect(audioContext.destination);

function updateVisualizer() {
    const dataArray = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(dataArray);

    const bars = document.querySelectorAll('.visualizer-bar');
    const bufferLength = analyser.frequencyBinCount;

    for (let i = 0; i < bars.length; i++) {
        const value = dataArray[i] || 0;
        const percent = (value / 255) * 100;
        bars[i].style.height = percent + '%';
    }

    requestAnimationFrame(updateVisualizer);
}