Minor update
This commit is contained in:
65
README.md
65
README.md
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user