# rzatf/foo_beautifoo architecture

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

- Interactive diagram: https://gitdiagram.com/rzatf/foo_beautifoo
- Repository: https://github.com/rzatf/foo_beautifoo

## Overview

Beautifoo is a foobar2000 WebView karaoke-lyrics panel. Playback metadata flows through the bridge and local API to the lyrics engine, which checks available local/cache data and queries lyric providers; parsed, timed lyrics return to the renderer for synchronized highlighting. The README documents scrolling, Romaji toggling, and karaoke rendering. Provider and parser coverage is represented from the tree and engine imports; their detailed wiring was not sampled, so uncertain provider-to-parser links are omitted.

Main entry points: [`src/lyricsEngine.js`](https://github.com/rzatf/foo_beautifoo/blob/master/src/lyricsEngine.js) (Lyrics engine), [`src/utils/bridge.js`](https://github.com/rzatf/foo_beautifoo/blob/master/src/utils/bridge.js) (Playback bridge), [`src/providers/netease.js`](https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/netease.js) (NetEase provider), [`src/providers/qqmusic.js`](https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/qqmusic.js) (QQ Music provider)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_playback["Playback and API"]
  node_bridge["Playback bridge<br/>[bridge.js]"]
  node_server["Lyrics API<br/>[server.js]"]
end

subgraph group_lyrics["Lyrics retrieval"]
  node_engine["Lyrics engine<br/>[lyricsEngine.js]"]
  node_cache[("Disk cache<br/>[lyricsEngine.js]")]
  node_local["Local lyrics<br/>[localLyrics.js]"]
  node_netease["NetEase provider<br/>[netease.js]"]
  node_synclrc["SyncLRC provider<br/>[synclrc.js]"]
  node_karalyr["KaraLyr provider<br/>[karalyr.js]"]
  node_kugou["Kugou provider<br/>[kugou.js]"]
  node_qqmusic["QQ Music provider<br/>[qqmusic.js]"]
  node_lrclib["LRCLIB provider<br/>[lrclib.js]"]
  node_musixmatch["Musixmatch provider<br/>[musixmatch.js]"]
end

subgraph group_formats["Provider formats"]
  node_decrypt["Lyric decryptors"]
  node_parsers["Lyric parsers"]
  node_romaji["Romaji conversion<br/>[romaji.js]"]
end

subgraph group_display["Karaoke display"]
  node_ui["Lyrics renderer<br/>[app.js]"]
  node_panel["WebView panel<br/>[index.html]"]
end

node_foobar(("foobar2000"))
node_musicapis(("Music services"))

node_foobar -->|"provides playback"| node_bridge
node_bridge -->|"requests lyrics"| node_server
node_server -->|"calls"| node_engine
node_engine -->|"reads and writes"| node_cache
node_engine -->|"checks local lyrics"| node_local
node_engine -->|"queries"| node_netease
node_engine -->|"queries"| node_synclrc
node_engine -->|"queries"| node_karalyr
node_engine -->|"queries"| node_kugou
node_engine -->|"queries"| node_qqmusic
node_engine -->|"queries"| node_lrclib
node_engine -->|"queries"| node_musixmatch
node_netease -->|"requests"| node_musicapis
node_synclrc -->|"requests"| node_musicapis
node_karalyr -->|"requests"| node_musicapis
node_kugou -->|"requests"| node_musicapis
node_qqmusic -->|"requests"| node_musicapis
node_lrclib -->|"requests"| node_musicapis
node_musixmatch -->|"requests"| node_musicapis
node_qqmusic -->|"decrypts QRC"| node_decrypt
node_netease -->|"decrypts EAPI"| node_decrypt
node_engine -->|"parses provider data"| node_parsers
node_engine -->|"attaches Romaji"| node_romaji
node_bridge -->|"supplies lyrics and state"| node_ui
node_panel -->|"hosts"| node_ui

click node_bridge "https://github.com/rzatf/foo_beautifoo/blob/master/src/utils/bridge.js"
click node_server "https://github.com/rzatf/foo_beautifoo/blob/master/server.js"
click node_engine "https://github.com/rzatf/foo_beautifoo/blob/master/src/lyricsEngine.js"
click node_cache "https://github.com/rzatf/foo_beautifoo/blob/master/src/lyricsEngine.js"
click node_local "https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/localLyrics.js"
click node_netease "https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/netease.js"
click node_synclrc "https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/synclrc.js"
click node_karalyr "https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/karalyr.js"
click node_kugou "https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/kugou.js"
click node_qqmusic "https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/qqmusic.js"
click node_lrclib "https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/lrclib.js"
click node_musixmatch "https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/musixmatch.js"
click node_decrypt "https://github.com/rzatf/foo_beautifoo/tree/master/src/decryptor"
click node_parsers "https://github.com/rzatf/foo_beautifoo/tree/master/src/parsers"
click node_romaji "https://github.com/rzatf/foo_beautifoo/blob/master/src/utils/romaji.js"
click node_ui "https://github.com/rzatf/foo_beautifoo/blob/master/renderer/app.js"
click node_panel "https://github.com/rzatf/foo_beautifoo/blob/master/renderer/index.html"

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_bridge,node_server toneBlue
class node_engine,node_cache,node_local,node_netease,node_synclrc,node_karalyr,node_kugou,node_qqmusic,node_lrclib,node_musixmatch toneAmber
class node_decrypt,node_parsers,node_romaji toneMint
class node_ui,node_panel toneRose
class node_foobar,node_musicapis toneIndigo
```

## Components

### Playback and API

- [Playback bridge](https://github.com/rzatf/foo_beautifoo/blob/master/src/utils/bridge.js): `src/utils/bridge.js`
- [Lyrics API](https://github.com/rzatf/foo_beautifoo/blob/master/server.js): `server.js`

### Lyrics retrieval

- [Lyrics engine](https://github.com/rzatf/foo_beautifoo/blob/master/src/lyricsEngine.js): `src/lyricsEngine.js`
- [Disk cache](https://github.com/rzatf/foo_beautifoo/blob/master/src/lyricsEngine.js): `src/lyricsEngine.js`
- [Local lyrics](https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/localLyrics.js): `src/providers/localLyrics.js`
- [NetEase provider](https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/netease.js): `src/providers/netease.js`
- [SyncLRC provider](https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/synclrc.js): `src/providers/synclrc.js`
- [KaraLyr provider](https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/karalyr.js): `src/providers/karalyr.js`
- [Kugou provider](https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/kugou.js): `src/providers/kugou.js`
- [QQ Music provider](https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/qqmusic.js): `src/providers/qqmusic.js`
- [LRCLIB provider](https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/lrclib.js): `src/providers/lrclib.js`
- [Musixmatch provider](https://github.com/rzatf/foo_beautifoo/blob/master/src/providers/musixmatch.js): `src/providers/musixmatch.js`

### Provider formats

- [Lyric decryptors](https://github.com/rzatf/foo_beautifoo/tree/master/src/decryptor): `src/decryptor`
- [Lyric parsers](https://github.com/rzatf/foo_beautifoo/tree/master/src/parsers): `src/parsers`
- [Romaji conversion](https://github.com/rzatf/foo_beautifoo/blob/master/src/utils/romaji.js): `src/utils/romaji.js`

### Karaoke display

- [Lyrics renderer](https://github.com/rzatf/foo_beautifoo/blob/master/renderer/app.js): `renderer/app.js`
- [WebView panel](https://github.com/rzatf/foo_beautifoo/blob/master/renderer/index.html): `renderer/index.html`

### Other components

- **foobar2000**
- **Music services**

## Connections

- foobar2000 → Playback bridge: provides playback
- Playback bridge → Lyrics API: requests lyrics
- Lyrics API → Lyrics engine: calls
- Lyrics engine → Disk cache: reads and writes
- Lyrics engine → Local lyrics: checks local lyrics
- Lyrics engine → NetEase provider: queries
- Lyrics engine → SyncLRC provider: queries
- Lyrics engine → KaraLyr provider: queries
- Lyrics engine → Kugou provider: queries
- Lyrics engine → QQ Music provider: queries
- Lyrics engine → LRCLIB provider: queries
- Lyrics engine → Musixmatch provider: queries
- NetEase provider → Music services: requests
- SyncLRC provider → Music services: requests
- KaraLyr provider → Music services: requests
- Kugou provider → Music services: requests
- QQ Music provider → Music services: requests
- LRCLIB provider → Music services: requests
- Musixmatch provider → Music services: requests
- QQ Music provider → Lyric decryptors: decrypts QRC
- NetEase provider → Lyric decryptors: decrypts EAPI
- Lyrics engine → Lyric parsers: parses provider data
- Lyrics engine → Romaji conversion: attaches Romaji
- Playback bridge → Lyrics renderer: supplies lyrics and state
- WebView panel → Lyrics renderer: hosts