# bodhisattva-duduka/viibe-music-player architecture

> Architecture diagram of the GitHub repository bodhisattva-duduka/viibe-music-player, 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/bodhisattva-duduka/viibe-music-player
- Repository: https://github.com/bodhisattva-duduka/viibe-music-player

## Overview

Viibe is a client-side music player with a playlist-browsing workflow: the user opens the main page, the playlist controller reads the local playlist catalog, and selecting a track connects it to browser audio playback. Playback controls provide play/pause, seeking, and volume; the README also documents skip and replay. The repository includes a separate player page and a music-animation showcase. Source excerpts are partial, so uncertain event wiring and the implementation of documented skip/replay behavior are not shown as separate components.

Main entry points: [`script.js`](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/script.js) (Playlist controller), [`index.html`](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/index.html) (Main page), [`musicPlayer.html`](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayer.html) (Player page), [`musicPlayer.js`](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayer.js) (Player controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Playlist catalog"]
  node_playlist_controller["Playlist controller<br/>[script.js]"]
  node_playlist_data[("Playlist data<br/>[playlists.json]")]
  node_track_files[("Track files")]
end

subgraph group_main_player["Main player"]
  node_main_page["Main page<br/>[index.html]"]
  node_main_audio["Browser audio<br/>[index.html]"]
  node_playback_controls["Playback controls<br/>[script.js]"]
end

subgraph group_standalone_player["Standalone player"]
  node_player_page["Player page<br/>[musicPlayer.html]"]
  node_player_logic["Player controls<br/>[musicPlayer.js]"]
  node_player_audio["Player audio<br/>[musicPlayer.html]"]
end

subgraph group_presentation["Presentation"]
  node_animation_showcase["Playing animation"]
  node_main_styles["Main styles<br/>[style.css]"]
  node_player_styles["Player styles<br/>[musicPlayer.css]"]
  node_player_animation["Player animation"]
  node_player_assets["UI assets"]
end

node_listener(("Listener"))

node_listener -->|"opens"| node_main_page
node_main_page -->|"loads"| node_playlist_controller
node_playlist_controller -->|"fetches"| node_playlist_data
node_playlist_controller -->|"renders playlists"| node_main_page
node_listener -->|"selects track"| node_playlist_controller
node_playlist_controller -->|"selects audio"| node_track_files
node_playlist_controller -->|"sets source"| node_main_audio
node_listener -->|"uses controls"| node_playback_controls
node_playback_controls -->|"controls playback"| node_main_audio
node_listener -->|"opens"| node_player_page
node_player_page -->|"loads"| node_player_logic
node_player_logic -->|"controls playback"| node_player_audio
node_listener -->|"views"| node_animation_showcase
node_main_page -->|"uses styles"| node_main_styles
node_player_page -->|"uses styles"| node_player_styles
node_main_page -->|"uses assets"| node_player_assets

click node_main_page "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/index.html"
click node_playlist_controller "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/script.js"
click node_playlist_data "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/playlists.json"
click node_track_files "https://github.com/bodhisattva-duduka/viibe-music-player/tree/master/Bollywood%20songs"
click node_main_audio "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/index.html"
click node_playback_controls "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/script.js"
click node_player_page "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayer.html"
click node_player_logic "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayer.js"
click node_player_audio "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayer.html"
click node_animation_showcase "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayingAnimation.html"
click node_main_styles "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/style.css"
click node_player_styles "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayer.css"
click node_player_animation "https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayingAnimation.html"
click node_player_assets "https://github.com/bodhisattva-duduka/viibe-music-player/tree/master/assets"

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_playlist_controller,node_playlist_data,node_track_files toneBlue
class node_main_page,node_main_audio,node_playback_controls toneAmber
class node_player_page,node_player_logic,node_player_audio toneMint
class node_animation_showcase,node_main_styles,node_player_styles,node_player_animation,node_player_assets toneRose
class node_listener toneIndigo
```

## Components

### Playlist catalog

- [Playlist controller](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/script.js): `script.js`
- [Playlist data](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/playlists.json): `playlists.json`
- [Track files](https://github.com/bodhisattva-duduka/viibe-music-player/tree/master/Bollywood%20songs): `Bollywood songs`

### Main player

- [Main page](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/index.html): `index.html`
- [Browser audio](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/index.html): `index.html`
- [Playback controls](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/script.js): `script.js`

### Standalone player

- [Player page](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayer.html): `musicPlayer.html`
- [Player controls](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayer.js): `musicPlayer.js`
- [Player audio](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayer.html): `musicPlayer.html`

### Presentation

- [Playing animation](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayingAnimation.html): `musicPlayingAnimation.html`
- [Main styles](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/style.css): `style.css`
- [Player styles](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayer.css): `musicPlayer.css`
- [Player animation](https://github.com/bodhisattva-duduka/viibe-music-player/blob/master/musicPlayingAnimation.html): `musicPlayingAnimation.html`
- [UI assets](https://github.com/bodhisattva-duduka/viibe-music-player/tree/master/assets): `assets`

### Other components

- **Listener**

## Connections

- Listener → Main page: opens
- Main page → Playlist controller: loads
- Playlist controller → Playlist data: fetches
- Playlist controller → Main page: renders playlists
- Listener → Playlist controller: selects track
- Playlist controller → Track files: selects audio
- Playlist controller → Browser audio: sets source
- Listener → Playback controls: uses controls
- Playback controls → Browser audio: controls playback
- Listener → Player page: opens
- Player page → Player controls: loads
- Player controls → Player audio: controls playback
- Listener → Playing animation: views
- Main page → Main styles: uses styles
- Player page → Player styles: uses styles
- Main page → UI assets: uses assets