# warpprism/autopiano architecture

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

- Interactive diagram: https://gitdiagram.com/warpprism/autopiano
- Repository: https://github.com/warpprism/autopiano

## Overview

AutoPiano is a browser-based virtual piano and music platform. The principal workflow is entering the piano through the routed app, playing keys or selecting automatic playback, and hearing notes rendered through Tone.js. The tree also documents score catalogs in several formats, lyrics, wallpapers, friend links, and product listings. The sampled source confirms piano setup and XML playback; other playback formats and page wiring are represented only where supported by the tree or README, so uncertain connections are omitted.

Main entry points: [`src/pages/AutoPianoMobile.vue`](https://github.com/warpprism/autopiano/blob/master/src/pages/AutoPianoMobile.vue) (Mobile page), [`src/components/Piano.vue`](https://github.com/warpprism/autopiano/blob/master/src/components/Piano.vue) (Virtual piano), [`src/router/index.js`](https://github.com/warpprism/autopiano/blob/master/src/router/index.js) (Page router), [`src/main.js`](https://github.com/warpprism/autopiano/blob/master/src/main.js) (Vue app entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App Navigation"]
  node_app_entry["Vue app entry<br/>[main.js]"]
  node_app_shell["App shell<br/>[App.vue]"]
  node_router["Page router<br/>[index.js]"]
  node_piano_page["Piano page<br/>[AutoPianoPC.vue]"]
  node_mobile_page["Mobile page"]
end

subgraph group_play["Piano Playback"]
  node_piano["Virtual piano<br/>[Piano.vue]"]
  node_xml_player["XML playback"]
  node_midi_player["MIDI playback"]
  node_number_player["Number playback"]
  node_instrument_loader["Instrument loader"]
  node_tone["Tone audio"]
  node_piano_samples["Piano samples"]
end

subgraph group_music["Music Content"]
  node_score_catalogs["Score catalogs"]
  node_score_lists["Score lists"]
  node_lyrics["Lyrics catalog<br/>[lyrics.js]"]
end

subgraph group_platform["Platform Features"]
  node_wallpapers["Wallpaper catalog<br/>[wallpaper.js]"]
  node_friend_links["Friend links<br/>[FriendLinks.vue]"]
  node_commerce["Product listings<br/>[CommodityList.vue]"]
  node_goods_data["Product catalog<br/>[goods.js]"]
end

node_visitor(("Piano visitor"))

node_visitor -->|"opens"| node_app_entry
node_app_entry -->|"renders"| node_app_shell
node_app_entry -->|"installs"| node_router
node_router -->|"routes"| node_piano_page
node_router -->|"routes"| node_mobile_page
node_mobile_page -->|"renders"| node_piano
node_piano -->|"loads samples"| node_instrument_loader
node_instrument_loader -->|"creates sampler"| node_tone
node_instrument_loader -->|"loads audio"| node_piano_samples
node_piano -->|"mixes in"| node_xml_player
node_piano -->|"mixes in"| node_midi_player
node_piano -->|"mixes in"| node_number_player
node_score_lists -->|"uses scores"| node_score_catalogs
node_mobile_page -->|"renders"| node_score_lists
node_mobile_page -->|"renders lyrics"| node_lyrics
node_mobile_page -.->|"sets wallpaper"| node_wallpapers
node_router -->|"routes"| node_friend_links
node_commerce -->|"uses catalog"| node_goods_data

click node_app_entry "https://github.com/warpprism/autopiano/blob/master/src/main.js"
click node_app_shell "https://github.com/warpprism/autopiano/blob/master/src/App.vue"
click node_router "https://github.com/warpprism/autopiano/blob/master/src/router/index.js"
click node_piano_page "https://github.com/warpprism/autopiano/blob/master/src/pages/AutoPianoPC.vue"
click node_mobile_page "https://github.com/warpprism/autopiano/blob/master/src/pages/AutoPianoMobile.vue"
click node_piano "https://github.com/warpprism/autopiano/blob/master/src/components/Piano.vue"
click node_xml_player "https://github.com/warpprism/autopiano/blob/master/src/mixins/xmlAutoPlayMixin.js"
click node_midi_player "https://github.com/warpprism/autopiano/blob/master/src/mixins/midiAutoPlayMixin.js"
click node_number_player "https://github.com/warpprism/autopiano/blob/master/src/mixins/pianoAutoPlayMixin.js"
click node_instrument_loader "https://github.com/warpprism/autopiano/blob/master/src/lib/Tonejs-Instruments.js"
click node_piano_samples "https://github.com/warpprism/autopiano/tree/master/static/samples/piano"
click node_score_catalogs "https://github.com/warpprism/autopiano/tree/master/src/config"
click node_score_lists "https://github.com/warpprism/autopiano/tree/master/src/components"
click node_lyrics "https://github.com/warpprism/autopiano/blob/master/src/config/lyrics.js"
click node_wallpapers "https://github.com/warpprism/autopiano/blob/master/src/config/wallpaper.js"
click node_friend_links "https://github.com/warpprism/autopiano/blob/master/src/pages/FriendLinks.vue"
click node_commerce "https://github.com/warpprism/autopiano/blob/master/src/components/CommodityList.vue"
click node_goods_data "https://github.com/warpprism/autopiano/blob/master/src/config/goods.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_app_entry,node_app_shell,node_router,node_piano_page,node_mobile_page toneBlue
class node_piano,node_xml_player,node_midi_player,node_number_player,node_instrument_loader,node_tone,node_piano_samples toneAmber
class node_score_catalogs,node_score_lists,node_lyrics toneMint
class node_wallpapers,node_friend_links,node_commerce,node_goods_data toneRose
class node_visitor toneIndigo
```

## Components

### App Navigation

- [Vue app entry](https://github.com/warpprism/autopiano/blob/master/src/main.js): `src/main.js`
- [App shell](https://github.com/warpprism/autopiano/blob/master/src/App.vue): `src/App.vue`
- [Page router](https://github.com/warpprism/autopiano/blob/master/src/router/index.js): `src/router/index.js`
- [Piano page](https://github.com/warpprism/autopiano/blob/master/src/pages/AutoPianoPC.vue): `src/pages/AutoPianoPC.vue`
- [Mobile page](https://github.com/warpprism/autopiano/blob/master/src/pages/AutoPianoMobile.vue): `src/pages/AutoPianoMobile.vue`

### Piano Playback

- [Virtual piano](https://github.com/warpprism/autopiano/blob/master/src/components/Piano.vue): `src/components/Piano.vue`
- [XML playback](https://github.com/warpprism/autopiano/blob/master/src/mixins/xmlAutoPlayMixin.js): `src/mixins/xmlAutoPlayMixin.js`
- [MIDI playback](https://github.com/warpprism/autopiano/blob/master/src/mixins/midiAutoPlayMixin.js): `src/mixins/midiAutoPlayMixin.js`
- [Number playback](https://github.com/warpprism/autopiano/blob/master/src/mixins/pianoAutoPlayMixin.js): `src/mixins/pianoAutoPlayMixin.js`
- [Instrument loader](https://github.com/warpprism/autopiano/blob/master/src/lib/Tonejs-Instruments.js): `src/lib/Tonejs-Instruments.js`
- **Tone audio**
- [Piano samples](https://github.com/warpprism/autopiano/tree/master/static/samples/piano): `static/samples/piano`

### Music Content

- [Score catalogs](https://github.com/warpprism/autopiano/tree/master/src/config): `src/config`
- [Score lists](https://github.com/warpprism/autopiano/tree/master/src/components): `src/components`
- [Lyrics catalog](https://github.com/warpprism/autopiano/blob/master/src/config/lyrics.js): `src/config/lyrics.js`

### Platform Features

- [Wallpaper catalog](https://github.com/warpprism/autopiano/blob/master/src/config/wallpaper.js): `src/config/wallpaper.js`
- [Friend links](https://github.com/warpprism/autopiano/blob/master/src/pages/FriendLinks.vue): `src/pages/FriendLinks.vue`
- [Product listings](https://github.com/warpprism/autopiano/blob/master/src/components/CommodityList.vue): `src/components/CommodityList.vue`
- [Product catalog](https://github.com/warpprism/autopiano/blob/master/src/config/goods.js): `src/config/goods.js`

### Other components

- **Piano visitor**

## Connections

- Piano visitor → Vue app entry: opens
- Vue app entry → App shell: renders
- Vue app entry → Page router: installs
- Page router → Piano page: routes
- Page router → Mobile page: routes
- Mobile page → Virtual piano: renders
- Virtual piano → Instrument loader: loads samples
- Instrument loader → Tone audio: creates sampler
- Instrument loader → Piano samples: loads audio
- Virtual piano → XML playback: mixes in
- Virtual piano → MIDI playback: mixes in
- Virtual piano → Number playback: mixes in
- Score lists → Score catalogs: uses scores
- Mobile page → Score lists: renders
- Mobile page → Lyrics catalog: renders lyrics
- Mobile page → Wallpaper catalog: sets wallpaper
- Page router → Friend links: routes
- Product listings → Product catalog: uses catalog