# daihongyu974-commits/djman architecture

> Architecture diagram of the GitHub repository daihongyu974-commits/djman, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/daihongyu974-commits/djman
- Repository: https://github.com/daihongyu974-commits/djman

## Overview

DJMAN is a browser-based playlist mixer: users add local tracks or Audius tracks, the engine analyzes and orders them, then plays and automatically mixes successive tracks under panel control. The README documents the major engine sections; the sampled source confirms the React-to-engine startup, local-file handling, deck and transport behavior, and Web Audio processing. Most engine details are in one file, so the internal components below share that path; unsampled wiring is not expanded.

Main entry points: [`src/djman/engine.js`](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js) (Playback transport), [`src/djman/DjmanApp.tsx`](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/DjmanApp.tsx) (Mixer page), [`src/main.tsx`](https://github.com/daihongyu974-commits/djman/blob/main/src/main.tsx) (React bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Interface"]
  node_boot["React bootstrap<br/>[main.tsx]"]
  node_page["Mixer page<br/>[DjmanApp.tsx]"]
  node_controls["Device controls<br/>[engine.js]"]
  node_display["Screen and status<br/>[engine.js]"]
  node_manual["Control manual<br/>[engine.js]"]
end

subgraph group_playlist["Track preparation"]
  node_playlistui["Playlist UI<br/>[engine.js]"]
  node_local["Local track intake<br/>[engine.js]"]
  node_audius["Audius search and download<br/>[engine.js]"]
  node_analysis["BPM and beat analysis<br/>[engine.js]"]
  node_key["Key analysis and sorting<br/>[engine.js]"]
end

subgraph group_mixing["Mix engine"]
  node_transport["Playback transport<br/>[engine.js]"]
  node_decks["Track decks<br/>[engine.js]"]
  node_scheduler["Transition scheduler<br/>[engine.js]"]
  node_effects["Master effects<br/>[engine.js]"]
  node_samples["Samples and loops<br/>[engine.js]"]
end

subgraph group_services["Audio and catalog"]
  node_audiusapi["Audius API"]
  node_webaudio["Browser Web Audio"]
end

node_user(("DJ / listener"))

node_user -->|"uses"| node_page
node_boot -->|"renders"| node_page
node_page -->|"starts engine"| node_transport
node_user -->|"selects files"| node_local
node_page -->|"provides markup"| node_playlistui
node_local -->|"queues tracks"| node_analysis
node_audius -.->|"searches and streams"| node_audiusapi
node_audiusapi -.->|"returns tracks"| node_audius
node_audius -.->|"submits tracks"| node_analysis
node_analysis -->|"provides track data"| node_key
node_key -->|"sorts playlist"| node_playlistui
node_playlistui -->|"selects tracks"| node_transport
node_controls -->|"controls playback"| node_transport
node_controls -->|"sets transition"| node_scheduler
node_transport -->|"starts and stops"| node_decks
node_transport -->|"requests transitions"| node_scheduler
node_scheduler -->|"schedules mix"| node_decks
node_controls -->|"selects effects"| node_effects
node_controls -->|"triggers samples"| node_samples
node_decks -->|"processes audio"| node_webaudio
node_scheduler -->|"schedules audio"| node_webaudio
node_effects -->|"processes effects"| node_webaudio
node_samples -->|"synthesizes audio"| node_webaudio
node_transport -->|"updates playback view"| node_display
node_controls -->|"updates settings"| node_display
node_page -->|"provides manual area"| node_manual

click node_boot "https://github.com/daihongyu974-commits/djman/blob/main/src/main.tsx"
click node_page "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/DjmanApp.tsx"
click node_controls "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_display "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_manual "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_playlistui "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_local "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_audius "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_analysis "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_key "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_transport "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_decks "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_scheduler "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_effects "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"
click node_samples "https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_boot,node_page,node_controls,node_display,node_manual toneBlue
class node_playlistui,node_local,node_audius,node_analysis,node_key toneAmber
class node_transport,node_decks,node_scheduler,node_effects,node_samples toneMint
class node_audiusapi,node_webaudio toneRose
class node_user toneIndigo
```

## Components

### Interface

- [React bootstrap](https://github.com/daihongyu974-commits/djman/blob/main/src/main.tsx): `src/main.tsx`
- [Mixer page](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/DjmanApp.tsx): `src/djman/DjmanApp.tsx`
- [Device controls](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`
- [Screen and status](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`
- [Control manual](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`

### Track preparation

- [Playlist UI](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`
- [Local track intake](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`
- [Audius search and download](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`
- [BPM and beat analysis](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`
- [Key analysis and sorting](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`

### Mix engine

- [Playback transport](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`
- [Track decks](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`
- [Transition scheduler](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`
- [Master effects](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`
- [Samples and loops](https://github.com/daihongyu974-commits/djman/blob/main/src/djman/engine.js): `src/djman/engine.js`

### Audio and catalog

- **Audius API**
- **Browser Web Audio**

### Other components

- **DJ / listener**

## Connections

- DJ / listener → Mixer page: uses
- React bootstrap → Mixer page: renders
- Mixer page → Playback transport: starts engine
- DJ / listener → Local track intake: selects files
- Mixer page → Playlist UI: provides markup
- Local track intake → BPM and beat analysis: queues tracks
- Audius search and download → Audius API: searches and streams
- Audius API → Audius search and download: returns tracks
- Audius search and download → BPM and beat analysis: submits tracks
- BPM and beat analysis → Key analysis and sorting: provides track data
- Key analysis and sorting → Playlist UI: sorts playlist
- Playlist UI → Playback transport: selects tracks
- Device controls → Playback transport: controls playback
- Device controls → Transition scheduler: sets transition
- Playback transport → Track decks: starts and stops
- Playback transport → Transition scheduler: requests transitions
- Transition scheduler → Track decks: schedules mix
- Device controls → Master effects: selects effects
- Device controls → Samples and loops: triggers samples
- Track decks → Browser Web Audio: processes audio
- Transition scheduler → Browser Web Audio: schedules audio
- Master effects → Browser Web Audio: processes effects
- Samples and loops → Browser Web Audio: synthesizes audio
- Playback transport → Screen and status: updates playback view
- Device controls → Screen and status: updates settings
- Mixer page → Control manual: provides manual area