Minor update

This commit is contained in:
AlacrisDevs
2026-02-18 10:02:20 +02:00
parent 2d1e3a401f
commit 21df667646
6 changed files with 213 additions and 104 deletions

View File

@@ -1,42 +1,57 @@
# sv
# Audio Visualizer
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
A real-time audio visualizer built with SvelteKit, Canvas API, and Web Audio API. Capture audio from your microphone, browser tab, or a local file and watch it come to life with reactive visuals, particles, and customizable themes.
## Creating a project
## Features
If you're seeing this, you've probably already done this step. Congrats!
- **4 Visualization Modes** — Circular, Bars, Wave, and Blob
- **3 Audio Sources** — Microphone, Browser Tab (Chrome/Edge), and Local File
- **Particle System** — Configurable density, size, rotation, and custom particle images
- **Audio Reactivity** — Sensitivity, smoothing, and bass emphasis controls
- **Visual Effects** — Shake, zoom, and glow intensity sliders
- **Color Presets & Custom Colors** — 6 built-in presets or pick your own gradient
- **Branding** — Custom logo with optional spin, title, and subtitle with positioning
- **Background** — Custom image, color picker, and vignette toggle
- **Theme System** — Save, load, import, and export themes as `.vslzr` files
- **Screenshot Export** — Save the current visualization as a PNG
- **Fullscreen Mode** — Immersive fullscreen with keyboard shortcut
- **i18n** — English and Estonian via Paraglide.js
- **Persistent Settings** — All settings saved to localStorage
## Quick Start
```sh
# create a new project
npx sv create my-app
```
# Clone the repo
git clone https://git.lapikud.ee/sass/audio-visualizer.git
cd audio-visualizer
To recreate this project with the same configuration:
# Install dependencies
npm install
```sh
# recreate this project
npx sv create --template minimal --types ts --add tailwindcss="plugins:typography,forms" paraglide="languageTags:en, et+demo:no" --install npm audio-visualizer-v2
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```sh
# Start dev server
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
Open [http://localhost:5173](http://localhost:5173) in your browser.
To create a production version of your app:
## Keyboard Shortcuts
| Key | Action |
| --- | --- |
| `Space` | Play / Stop |
| `F` | Toggle Fullscreen |
| `H` | Hide / Show Sidebar |
## Build
```sh
npm run build
npm run preview
```
You can preview the production build with `npm run preview`.
## Tech Stack
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
- **SvelteKit** + **Svelte 5** (runes)
- **Tailwind CSS v4**
- **Canvas API** + **Web Audio API**
- **Paraglide.js** for i18n