NetWave

Turn your network traffic into live generative music.

NetWave is a local-first creative app that translates live network behavior into generative sound. It is not a traditional network monitor. It is a sonification experience.

Features (MVP)

• Backend collector that samples network metrics every second
• WebSocket stream with realtime metrics
• React dashboard with socket status, BPM, metrics and activity bars
• Tone.js audio engine (kick, hi-hat, synth pad, dynamic filter)
• Progressive, smoothed mapping from network changes to music parameters

Stack

Backend (server/)

• Node.js
• Express
• ws
• ping
• systeminformation
• TypeScript

Frontend (client/)

• React
• Vite
• TypeScript
• Tone.js

Architecture

1. Backend samples metrics every 1000ms.
2. Backend broadcasts metrics messages via WebSocket.
3. Frontend subscribes to WebSocket stream.
4. Frontend maps metrics to musical parameters.
5. Tone.js engine updates transport/instruments in realtime.

Metrics Collected

• latency (ms)
• jitter (ms, moving average of latency deltas)
• downloadActivity (0-100 normalized)
• uploadActivity (0-100 normalized)
• packetLoss (% when available, otherwise null)

Music Mapping

• latency -> BPM
• downloadActivity -> beat intensity
• uploadActivity -> synth intensity
• jitter -> controlled glitch/swing variation
• packetLoss -> stutter probability

All parameters are smoothed to avoid abrupt changes.

Project Structure

netwave/
  server/
    src/
      index.ts
      metrics/collectMetrics.ts
      mapping/mapNetworkToMusic.ts
      types/metrics.ts
  client/
    src/
      App.tsx
      hooks/useMetricsSocket.ts
      audio/audioEngine.ts
      audio/musicMapper.ts
      components/MetricsPanel.tsx
      components/TransportPanel.tsx
      components/ActivityBars.tsx
      types/metrics.ts

Requirements

• Node.js 20+
• npm 10+
• Local network access enabled

Installation

From repository root:

npm install

Run in Development

Run both backend and frontend:

npm run dev

Apps:

• Backend: http://localhost:3001
• Frontend: http://localhost:5173

Run separately:

npm run dev:server
npm run dev:client

Build

Build both workspaces:

npm run build

Runtime Notes

• Browser audio requires a user gesture. Click Start Audio in the UI.
• Default ping target is 1.1.1.1.
• You can override ping host for backend:

PING_HOST=8.8.8.8 npm run dev:server

Limitations (Current MVP)

• Packet loss depends on OS/network command behavior and may be null.
• Activity is normalized from host network interface stats (not router-wide traffic).
• No persistence/database by design.
• Audio tuning is intentionally simple and local-first.

Future Improvements

• Better packet loss estimation and fallback strategies
• More musical scenes and scale presets
• Recording/export session mode
• Device selection for audio output
• Advanced visualization modes

License

MIT