Initial commit
This commit is contained in:
AlacrisDevs
31
.gitignore
vendored
Normal file
31
.gitignore
vendored
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Build output
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# Vite
|
||||||
|
.vite/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea/
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
# OS files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Environment files
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
31
index.html
Normal file
31
index.html
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Audio Visualizer</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #0a0a0a;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
1302
package-lock.json
generated
Normal file
1302
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
16
package.json
Normal file
16
package.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "audio-visualizer",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@sveltejs/vite-plugin-svelte": "^3.1.0",
|
||||||
|
"svelte": "^4.2.12",
|
||||||
|
"vite": "^5.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
591
src/App.svelte
Normal file
591
src/App.svelte
Normal file
@@ -0,0 +1,591 @@
|
|||||||
|
<script>
|
||||||
|
import { onMount, onDestroy } from "svelte";
|
||||||
|
import AudioVisualizer from "./lib/AudioVisualizer.svelte";
|
||||||
|
import Controls from "./lib/Controls.svelte";
|
||||||
|
|
||||||
|
const STORAGE_KEY = "ncs-visualizer-settings";
|
||||||
|
|
||||||
|
const defaults = {
|
||||||
|
selectedPreset: "cyanPink",
|
||||||
|
logoUrl: "",
|
||||||
|
title: "Audio Visualizer",
|
||||||
|
subtitle: "Now Playing",
|
||||||
|
bgImage: "",
|
||||||
|
bgColor: "#0a0a0a",
|
||||||
|
customPrimary: "#00d4ff",
|
||||||
|
customSecondary: "#ff006e",
|
||||||
|
useCustomColors: false,
|
||||||
|
sidebarOpen: true,
|
||||||
|
vignette: true,
|
||||||
|
audioSource: "mic",
|
||||||
|
audioUrl: "",
|
||||||
|
vizMode: "circular",
|
||||||
|
barCount: 48,
|
||||||
|
sensitivity: 1.0,
|
||||||
|
smoothing: 0.82,
|
||||||
|
bassEmphasis: 0.25,
|
||||||
|
particlesEnabled: true,
|
||||||
|
particleDensity: 1.0,
|
||||||
|
shakeAmount: 1.0,
|
||||||
|
zoomIntensity: 1.0,
|
||||||
|
glowIntensity: 0.6,
|
||||||
|
logoSpin: false,
|
||||||
|
logoSpinSpeed: 5,
|
||||||
|
titlePosition: "top",
|
||||||
|
};
|
||||||
|
|
||||||
|
function loadSettings() {
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem(STORAGE_KEY);
|
||||||
|
return raw ? { ...defaults, ...JSON.parse(raw) } : { ...defaults };
|
||||||
|
} catch {
|
||||||
|
return { ...defaults };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const saved = loadSettings();
|
||||||
|
|
||||||
|
let selectedPreset = saved.selectedPreset;
|
||||||
|
let logoUrl = saved.logoUrl;
|
||||||
|
let title = saved.title;
|
||||||
|
let subtitle = saved.subtitle;
|
||||||
|
let bgImage = saved.bgImage;
|
||||||
|
let bgColor = saved.bgColor;
|
||||||
|
let customPrimary = saved.customPrimary;
|
||||||
|
let customSecondary = saved.customSecondary;
|
||||||
|
let useCustomColors = saved.useCustomColors;
|
||||||
|
let isListening = false;
|
||||||
|
let sidebarOpen = saved.sidebarOpen;
|
||||||
|
let vignette = saved.vignette;
|
||||||
|
let audioSource = saved.audioSource;
|
||||||
|
let audioUrl = saved.audioUrl;
|
||||||
|
let vizMode = saved.vizMode;
|
||||||
|
let barCount = saved.barCount;
|
||||||
|
let sensitivity = saved.sensitivity;
|
||||||
|
let smoothing = saved.smoothing;
|
||||||
|
let bassEmphasis = saved.bassEmphasis;
|
||||||
|
let particlesEnabled = saved.particlesEnabled;
|
||||||
|
let particleDensity = saved.particleDensity;
|
||||||
|
let shakeAmount = saved.shakeAmount;
|
||||||
|
let zoomIntensity = saved.zoomIntensity;
|
||||||
|
let glowIntensity = saved.glowIntensity;
|
||||||
|
let logoSpin = saved.logoSpin;
|
||||||
|
let logoSpinSpeed = saved.logoSpinSpeed;
|
||||||
|
let titlePosition = saved.titlePosition;
|
||||||
|
let visualizerComponent;
|
||||||
|
let toggleHidden = false;
|
||||||
|
let hideTimer;
|
||||||
|
|
||||||
|
function startHideTimer() {
|
||||||
|
clearTimeout(hideTimer);
|
||||||
|
if (!sidebarOpen) {
|
||||||
|
hideTimer = setTimeout(() => {
|
||||||
|
toggleHidden = true;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleToggleClick() {
|
||||||
|
sidebarOpen = !sidebarOpen;
|
||||||
|
toggleHidden = false;
|
||||||
|
clearTimeout(hideTimer);
|
||||||
|
if (!sidebarOpen) startHideTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
$: if (!sidebarOpen) {
|
||||||
|
startHideTimer();
|
||||||
|
} else {
|
||||||
|
toggleHidden = false;
|
||||||
|
clearTimeout(hideTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
const settings = {
|
||||||
|
selectedPreset,
|
||||||
|
logoUrl,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
bgImage,
|
||||||
|
bgColor,
|
||||||
|
customPrimary,
|
||||||
|
customSecondary,
|
||||||
|
useCustomColors,
|
||||||
|
sidebarOpen,
|
||||||
|
vignette,
|
||||||
|
audioSource,
|
||||||
|
audioUrl,
|
||||||
|
vizMode,
|
||||||
|
barCount,
|
||||||
|
sensitivity,
|
||||||
|
smoothing,
|
||||||
|
bassEmphasis,
|
||||||
|
particlesEnabled,
|
||||||
|
particleDensity,
|
||||||
|
shakeAmount,
|
||||||
|
zoomIntensity,
|
||||||
|
glowIntensity,
|
||||||
|
logoSpin,
|
||||||
|
logoSpinSpeed,
|
||||||
|
titlePosition,
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleListening() {
|
||||||
|
if (isListening) {
|
||||||
|
visualizerComponent.stopListening();
|
||||||
|
} else {
|
||||||
|
visualizerComponent.startListening();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleScreenshot() {
|
||||||
|
const dataUrl = visualizerComponent.takeScreenshot();
|
||||||
|
if (!dataUrl) return;
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.download = "visualizer-screenshot.png";
|
||||||
|
link.href = dataUrl;
|
||||||
|
link.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFullscreen() {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
document.documentElement.requestFullscreen().catch(() => {});
|
||||||
|
} else {
|
||||||
|
document.exitFullscreen().catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReset() {
|
||||||
|
selectedPreset = defaults.selectedPreset;
|
||||||
|
logoUrl = defaults.logoUrl;
|
||||||
|
title = defaults.title;
|
||||||
|
subtitle = defaults.subtitle;
|
||||||
|
bgImage = defaults.bgImage;
|
||||||
|
bgColor = defaults.bgColor;
|
||||||
|
customPrimary = defaults.customPrimary;
|
||||||
|
customSecondary = defaults.customSecondary;
|
||||||
|
useCustomColors = defaults.useCustomColors;
|
||||||
|
vignette = defaults.vignette;
|
||||||
|
audioSource = defaults.audioSource;
|
||||||
|
audioUrl = defaults.audioUrl;
|
||||||
|
vizMode = defaults.vizMode;
|
||||||
|
barCount = defaults.barCount;
|
||||||
|
sensitivity = defaults.sensitivity;
|
||||||
|
smoothing = defaults.smoothing;
|
||||||
|
bassEmphasis = defaults.bassEmphasis;
|
||||||
|
particlesEnabled = defaults.particlesEnabled;
|
||||||
|
particleDensity = defaults.particleDensity;
|
||||||
|
shakeAmount = defaults.shakeAmount;
|
||||||
|
zoomIntensity = defaults.zoomIntensity;
|
||||||
|
glowIntensity = defaults.glowIntensity;
|
||||||
|
logoSpin = defaults.logoSpin;
|
||||||
|
logoSpinSpeed = defaults.logoSpinSpeed;
|
||||||
|
titlePosition = defaults.titlePosition;
|
||||||
|
}
|
||||||
|
|
||||||
|
let fileCurrentTime = 0;
|
||||||
|
let fileDuration = 0;
|
||||||
|
let filePlaying = false;
|
||||||
|
let fileName = "";
|
||||||
|
|
||||||
|
function handleAudioFile(e) {
|
||||||
|
const file = e.detail;
|
||||||
|
if (file && visualizerComponent) {
|
||||||
|
if (isListening) {
|
||||||
|
visualizerComponent.stopListening();
|
||||||
|
}
|
||||||
|
audioSource = "file";
|
||||||
|
visualizerComponent.setAudioFile(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFilePause() {
|
||||||
|
if (visualizerComponent) visualizerComponent.pauseAudio();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFileResume() {
|
||||||
|
if (visualizerComponent) visualizerComponent.resumeAudio();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFileSeek(e) {
|
||||||
|
if (visualizerComponent) visualizerComponent.seekAudio(e.detail);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleKeydown(e) {
|
||||||
|
// Ignore if user is typing in an input
|
||||||
|
if (
|
||||||
|
e.target.tagName === "INPUT" ||
|
||||||
|
e.target.tagName === "TEXTAREA" ||
|
||||||
|
e.target.isContentEditable
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
|
||||||
|
switch (e.code) {
|
||||||
|
case "Space":
|
||||||
|
e.preventDefault();
|
||||||
|
toggleListening();
|
||||||
|
break;
|
||||||
|
case "KeyF":
|
||||||
|
e.preventDefault();
|
||||||
|
handleFullscreen();
|
||||||
|
break;
|
||||||
|
case "KeyH":
|
||||||
|
e.preventDefault();
|
||||||
|
handleToggleClick();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
window.addEventListener("keydown", handleKeydown);
|
||||||
|
});
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
window.removeEventListener("keydown", handleKeydown);
|
||||||
|
});
|
||||||
|
|
||||||
|
const colorPresets = {
|
||||||
|
cyanPink: {
|
||||||
|
name: "Cyan/Pink",
|
||||||
|
primary: "#00d4ff",
|
||||||
|
secondary: "#ff006e",
|
||||||
|
},
|
||||||
|
purpleOrange: {
|
||||||
|
name: "Purple/Orange",
|
||||||
|
primary: "#8b5cf6",
|
||||||
|
secondary: "#f97316",
|
||||||
|
},
|
||||||
|
greenYellow: {
|
||||||
|
name: "Green/Yellow",
|
||||||
|
primary: "#22c55e",
|
||||||
|
secondary: "#eab308",
|
||||||
|
},
|
||||||
|
pinkBlue: {
|
||||||
|
name: "Pink/Blue",
|
||||||
|
primary: "#ec4899",
|
||||||
|
secondary: "#3b82f6",
|
||||||
|
},
|
||||||
|
redOrange: {
|
||||||
|
name: "Red/Orange",
|
||||||
|
primary: "#ef4444",
|
||||||
|
secondary: "#f97316",
|
||||||
|
},
|
||||||
|
white: {
|
||||||
|
name: "White",
|
||||||
|
primary: "#ffffff",
|
||||||
|
secondary: "#888888",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
$: currentColors = useCustomColors
|
||||||
|
? { primary: customPrimary, secondary: customSecondary }
|
||||||
|
: colorPresets[selectedPreset];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<main style="--bg-color: {bgColor}">
|
||||||
|
{#if bgImage}
|
||||||
|
<div class="bg-image" style="background-image: url({bgImage})"></div>
|
||||||
|
{/if}
|
||||||
|
{#if vignette}
|
||||||
|
<div class="vignette"></div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="stage">
|
||||||
|
<AudioVisualizer
|
||||||
|
bind:this={visualizerComponent}
|
||||||
|
colors={currentColors}
|
||||||
|
{logoUrl}
|
||||||
|
{audioSource}
|
||||||
|
{vizMode}
|
||||||
|
{barCount}
|
||||||
|
{sensitivity}
|
||||||
|
{smoothing}
|
||||||
|
{bassEmphasis}
|
||||||
|
{particlesEnabled}
|
||||||
|
{particleDensity}
|
||||||
|
{shakeAmount}
|
||||||
|
{zoomIntensity}
|
||||||
|
{glowIntensity}
|
||||||
|
{logoSpin}
|
||||||
|
{logoSpinSpeed}
|
||||||
|
bind:isListening
|
||||||
|
bind:fileCurrentTime
|
||||||
|
bind:fileDuration
|
||||||
|
bind:filePlaying
|
||||||
|
bind:fileName
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="titles title-{titlePosition}">
|
||||||
|
<h1 style="color: {currentColors.primary}">{title}</h1>
|
||||||
|
<h2 style="color: {currentColors.secondary}">{subtitle}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
|
<div
|
||||||
|
class="toggle-zone"
|
||||||
|
class:hidden={toggleHidden}
|
||||||
|
on:mouseenter={() => {
|
||||||
|
toggleHidden = false;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="sidebar-toggle"
|
||||||
|
class:open={sidebarOpen}
|
||||||
|
on:click={handleToggleClick}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
{#if sidebarOpen}
|
||||||
|
<path d="M15 18l-6-6 6-6" />
|
||||||
|
{:else}
|
||||||
|
<path d="M9 18l6-6-6-6" />
|
||||||
|
{/if}
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="sidebar" class:open={sidebarOpen}>
|
||||||
|
<Controls
|
||||||
|
bind:selectedPreset
|
||||||
|
bind:logoUrl
|
||||||
|
bind:title
|
||||||
|
bind:subtitle
|
||||||
|
bind:bgImage
|
||||||
|
bind:bgColor
|
||||||
|
bind:vignette
|
||||||
|
bind:audioSource
|
||||||
|
bind:audioUrl
|
||||||
|
bind:customPrimary
|
||||||
|
bind:customSecondary
|
||||||
|
bind:useCustomColors
|
||||||
|
bind:vizMode
|
||||||
|
bind:barCount
|
||||||
|
bind:sensitivity
|
||||||
|
bind:smoothing
|
||||||
|
bind:bassEmphasis
|
||||||
|
bind:particlesEnabled
|
||||||
|
bind:particleDensity
|
||||||
|
bind:shakeAmount
|
||||||
|
bind:zoomIntensity
|
||||||
|
bind:glowIntensity
|
||||||
|
bind:logoSpin
|
||||||
|
bind:logoSpinSpeed
|
||||||
|
bind:titlePosition
|
||||||
|
{isListening}
|
||||||
|
{colorPresets}
|
||||||
|
onToggle={toggleListening}
|
||||||
|
on:screenshot={handleScreenshot}
|
||||||
|
on:fullscreen={handleFullscreen}
|
||||||
|
on:reset={handleReset}
|
||||||
|
on:audiofile={handleAudioFile}
|
||||||
|
on:filepause={handleFilePause}
|
||||||
|
on:fileresume={handleFileResume}
|
||||||
|
on:fileseek={handleFileSeek}
|
||||||
|
{fileCurrentTime}
|
||||||
|
{fileDuration}
|
||||||
|
{filePlaying}
|
||||||
|
{fileName}
|
||||||
|
/>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-image {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vignette {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(
|
||||||
|
ellipse at center,
|
||||||
|
rgba(0, 0, 0, 0.5) 0%,
|
||||||
|
rgba(0, 0, 0, 1) 100%
|
||||||
|
);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titles {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
pointer-events: none;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1.5rem 2.5rem;
|
||||||
|
background: radial-gradient(
|
||||||
|
ellipse at center,
|
||||||
|
rgba(0, 0, 0, 0.7) 0%,
|
||||||
|
rgba(0, 0, 0, 0.4) 50%,
|
||||||
|
transparent 80%
|
||||||
|
);
|
||||||
|
text-shadow:
|
||||||
|
0 2px 8px rgba(0, 0, 0, 1),
|
||||||
|
0 0 30px rgba(0, 0, 0, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-top {
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-bottom {
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-center {
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-top-left {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-top-right {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-bottom-left {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-bottom-right {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-left {
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-right {
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(1.4rem, 3.5vw, 3rem);
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: clamp(1rem, 2vw, 1.8rem);
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
margin: 0.3rem 0 0 0;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-zone {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 50px;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 30;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-zone.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-zone.hidden:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-toggle {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
|
border-right: none;
|
||||||
|
border-radius: 8px 0 0 8px;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.75rem 0.4rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: right 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-toggle.open {
|
||||||
|
right: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-toggle:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: -320px;
|
||||||
|
width: 320px;
|
||||||
|
height: 100vh;
|
||||||
|
background: rgba(10, 10, 15, 0.92);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
z-index: 20;
|
||||||
|
overflow-y: auto;
|
||||||
|
transition: right 0.3s ease;
|
||||||
|
padding: 1.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.open {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
872
src/lib/AudioVisualizer.svelte
Normal file
872
src/lib/AudioVisualizer.svelte
Normal file
@@ -0,0 +1,872 @@
|
|||||||
|
<script>
|
||||||
|
import { onMount, onDestroy } from "svelte";
|
||||||
|
|
||||||
|
export let colors = { primary: "#00d4ff", secondary: "#ff006e" };
|
||||||
|
export let logoUrl = "";
|
||||||
|
export let isListening = false;
|
||||||
|
export let audioSource = "mic"; // "mic", "tab", "link", "file"
|
||||||
|
|
||||||
|
// Visualization mode: "circular", "bars", "wave", "blob"
|
||||||
|
export let vizMode = "circular";
|
||||||
|
export let barCount = 48;
|
||||||
|
export let sensitivity = 1.0;
|
||||||
|
export let smoothing = 0.82;
|
||||||
|
export let bassEmphasis = 0.25;
|
||||||
|
export let particlesEnabled = true;
|
||||||
|
export let particleDensity = 1.0;
|
||||||
|
export let shakeAmount = 1.0;
|
||||||
|
export let zoomIntensity = 1.0;
|
||||||
|
export let glowIntensity = 0.6;
|
||||||
|
export let logoSpin = false;
|
||||||
|
export let logoSpinSpeed = 5;
|
||||||
|
|
||||||
|
const DEFAULT_SIZE = 250;
|
||||||
|
const LINE_LIFT = 8;
|
||||||
|
const FREQ_RANGE = 0.55;
|
||||||
|
const INV_255 = 1 / 255;
|
||||||
|
const SMOOTH_FACTOR = 0.45;
|
||||||
|
const SCALE_SMOOTH = 0.15;
|
||||||
|
const MIN_SCALE = 1.0;
|
||||||
|
const MAX_SCALE = 1.35;
|
||||||
|
const MAX_PARTICLES = 600;
|
||||||
|
const CANVAS_PAD = 2.5;
|
||||||
|
|
||||||
|
let canvas;
|
||||||
|
let ctx;
|
||||||
|
let animationId;
|
||||||
|
let audioContext;
|
||||||
|
let analyser;
|
||||||
|
let currentStream = null;
|
||||||
|
let audioElement = null;
|
||||||
|
let audioSourceNode = null;
|
||||||
|
let dataArray = new Uint8Array(128);
|
||||||
|
let bufferLength = 128;
|
||||||
|
|
||||||
|
let size = DEFAULT_SIZE;
|
||||||
|
let centerX = DEFAULT_SIZE / 2;
|
||||||
|
let centerY = DEFAULT_SIZE / 2;
|
||||||
|
let baseRadius = DEFAULT_SIZE * 0.25;
|
||||||
|
|
||||||
|
let cosValues = new Float32Array(barCount);
|
||||||
|
let sinValues = new Float32Array(barCount);
|
||||||
|
let smoothedValues = new Float32Array(Math.ceil(barCount / 2));
|
||||||
|
let smoothedScale = MIN_SCALE;
|
||||||
|
let smoothedLoudness = 0;
|
||||||
|
let visualizerWrapper;
|
||||||
|
let blobPhase = 0;
|
||||||
|
|
||||||
|
// Particle system
|
||||||
|
let particles = [];
|
||||||
|
|
||||||
|
$: {
|
||||||
|
const totalBars = barCount;
|
||||||
|
const halfBars = Math.ceil(totalBars / 2);
|
||||||
|
cosValues = new Float32Array(totalBars);
|
||||||
|
sinValues = new Float32Array(totalBars);
|
||||||
|
smoothedValues = new Float32Array(halfBars);
|
||||||
|
precalculateAngles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function spawnParticles(loudness) {
|
||||||
|
if (!particlesEnabled) return;
|
||||||
|
const count = Math.floor(loudness * 8 * particleDensity);
|
||||||
|
const maxP = Math.floor(MAX_PARTICLES * particleDensity);
|
||||||
|
|
||||||
|
for (let j = 0; j < count; j++) {
|
||||||
|
if (particles.length >= maxP) break;
|
||||||
|
|
||||||
|
let p;
|
||||||
|
switch (vizMode) {
|
||||||
|
case "bars": {
|
||||||
|
// Sparks rise from random bar tops
|
||||||
|
const halfBars = Math.ceil(barCount / 2);
|
||||||
|
const cw = canvas ? canvas.width : window.innerWidth;
|
||||||
|
const ch = canvas ? canvas.height : window.innerHeight;
|
||||||
|
const totalWidth = cw;
|
||||||
|
const barGap = 3;
|
||||||
|
const barWidth = Math.max(
|
||||||
|
2,
|
||||||
|
(totalWidth - (halfBars - 1) * barGap) / halfBars,
|
||||||
|
);
|
||||||
|
const bottomY = ch;
|
||||||
|
const idx = Math.floor(Math.random() * halfBars);
|
||||||
|
const val = (smoothedValues[idx] || 0) * INV_255;
|
||||||
|
const h = Math.max(2, val * ch * 0.7);
|
||||||
|
const x = idx * (barWidth + barGap) + barWidth * Math.random();
|
||||||
|
p = {
|
||||||
|
x,
|
||||||
|
y: bottomY - h,
|
||||||
|
vx: (Math.random() - 0.5) * 2,
|
||||||
|
vy: -(1.5 + Math.random() * 4 * loudness),
|
||||||
|
life: 1.0,
|
||||||
|
decay: 0.008 + Math.random() * 0.02,
|
||||||
|
radius: 2 + Math.random() * 5,
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "wave": {
|
||||||
|
// Particles float upward from the wave line
|
||||||
|
const halfBars = Math.ceil(barCount / 2);
|
||||||
|
const cw = canvas ? canvas.width : window.innerWidth;
|
||||||
|
const ch = canvas ? canvas.height : window.innerHeight;
|
||||||
|
const totalWidth = cw;
|
||||||
|
const maxAmp = ch * 0.3;
|
||||||
|
const midY = ch * 0.5;
|
||||||
|
const t = Math.random();
|
||||||
|
const idx = Math.floor(t * (halfBars - 1));
|
||||||
|
const val = (smoothedValues[idx] || 0) * INV_255;
|
||||||
|
const x = t * totalWidth;
|
||||||
|
const y = midY - val * maxAmp;
|
||||||
|
p = {
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
vx: (Math.random() - 0.5) * 1.5,
|
||||||
|
vy: -(0.8 + Math.random() * 3 * loudness),
|
||||||
|
life: 1.0,
|
||||||
|
decay: 0.006 + Math.random() * 0.012,
|
||||||
|
radius: 2 + Math.random() * 4,
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "blob": {
|
||||||
|
// Particles swirl around the blob surface
|
||||||
|
const angle = Math.random() * Math.PI * 2;
|
||||||
|
const halfBars = Math.ceil(barCount / 2);
|
||||||
|
const freqIdx =
|
||||||
|
Math.floor(((((angle / (Math.PI * 2)) % 1) + 1) % 1) * halfBars) %
|
||||||
|
halfBars;
|
||||||
|
const val = (smoothedValues[freqIdx] || 0) * INV_255;
|
||||||
|
const maxDeform = size * 0.2;
|
||||||
|
const r = baseRadius + val * maxDeform + Math.random() * 10;
|
||||||
|
const tangent = angle + Math.PI / 2;
|
||||||
|
const speed = 1 + Math.random() * 3 * loudness;
|
||||||
|
p = {
|
||||||
|
x: centerX + Math.cos(angle) * r,
|
||||||
|
y: centerY + Math.sin(angle) * r,
|
||||||
|
vx: Math.cos(tangent) * speed + Math.cos(angle) * speed * 0.3,
|
||||||
|
vy: Math.sin(tangent) * speed + Math.sin(angle) * speed * 0.3,
|
||||||
|
life: 1.0,
|
||||||
|
decay: 0.006 + Math.random() * 0.015,
|
||||||
|
radius: 2 + Math.random() * 6,
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "circular":
|
||||||
|
default: {
|
||||||
|
// Radiate outward from circle
|
||||||
|
const angle = Math.random() * Math.PI * 2;
|
||||||
|
const spawnR = baseRadius * 0.7 + Math.random() * baseRadius * 0.3;
|
||||||
|
const speed = 1.5 + Math.random() * 5 * loudness;
|
||||||
|
p = {
|
||||||
|
x: centerX + Math.cos(angle) * spawnR,
|
||||||
|
y: centerY + Math.sin(angle) * spawnR,
|
||||||
|
vx: Math.cos(angle) * speed,
|
||||||
|
vy: Math.sin(angle) * speed,
|
||||||
|
life: 1.0,
|
||||||
|
decay: 0.005 + Math.random() * 0.015,
|
||||||
|
radius: 3 + Math.random() * 7,
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
particles.push(p);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateAndDrawParticles() {
|
||||||
|
if (!particlesEnabled) return;
|
||||||
|
const useSecondary = vizMode === "blob" || vizMode === "wave";
|
||||||
|
for (let i = particles.length - 1; i >= 0; i--) {
|
||||||
|
const p = particles[i];
|
||||||
|
p.x += p.vx;
|
||||||
|
p.y += p.vy;
|
||||||
|
// Gravity for bars mode (sparks fall slightly)
|
||||||
|
if (vizMode === "bars") p.vy += 0.04;
|
||||||
|
// Slight drag for blob mode (swirl slows)
|
||||||
|
if (vizMode === "blob") {
|
||||||
|
p.vx *= 0.995;
|
||||||
|
p.vy *= 0.995;
|
||||||
|
}
|
||||||
|
p.life -= p.decay;
|
||||||
|
if (p.life <= 0) {
|
||||||
|
particles[i] = particles[particles.length - 1];
|
||||||
|
particles.pop();
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const alpha = Math.floor(p.life * 200)
|
||||||
|
.toString(16)
|
||||||
|
.padStart(2, "0");
|
||||||
|
const color =
|
||||||
|
useSecondary && Math.random() > 0.5 ? colors.secondary : colors.primary;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(p.x, p.y, p.radius * p.life, 0, Math.PI * 2);
|
||||||
|
ctx.fillStyle = color + alpha;
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function precalculateAngles() {
|
||||||
|
const totalBars = barCount;
|
||||||
|
const halfBars = Math.ceil(totalBars / 2);
|
||||||
|
// Mirrored halves: right side goes bottom→top, left side mirrors
|
||||||
|
const angleStep = Math.PI / halfBars;
|
||||||
|
const halfStep = angleStep / 2;
|
||||||
|
for (let i = 0; i < halfBars; i++) {
|
||||||
|
// Right half: top → bottom
|
||||||
|
const rightAngle = -Math.PI / 2 + halfStep + i * angleStep;
|
||||||
|
cosValues[i] = Math.cos(rightAngle);
|
||||||
|
sinValues[i] = Math.sin(rightAngle);
|
||||||
|
|
||||||
|
// Left half: top → bottom (mirrored)
|
||||||
|
if (halfBars + i < totalBars) {
|
||||||
|
const leftAngle = -Math.PI / 2 - halfStep - i * angleStep;
|
||||||
|
cosValues[halfBars + i] = Math.cos(leftAngle);
|
||||||
|
sinValues[halfBars + i] = Math.sin(leftAngle);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function initAudio() {
|
||||||
|
audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
|
||||||
|
// Browsers may suspend AudioContext until a user gesture resumes it
|
||||||
|
if (audioContext.state === "suspended") {
|
||||||
|
await audioContext.resume();
|
||||||
|
}
|
||||||
|
|
||||||
|
analyser = audioContext.createAnalyser();
|
||||||
|
analyser.fftSize = 2048;
|
||||||
|
analyser.smoothingTimeConstant = smoothing;
|
||||||
|
bufferLength = analyser.frequencyBinCount;
|
||||||
|
dataArray = new Uint8Array(bufferLength);
|
||||||
|
|
||||||
|
let stream;
|
||||||
|
|
||||||
|
if (audioSource === "file" && audioElement) {
|
||||||
|
// Direct Web Audio pipeline — best quality, no mic needed
|
||||||
|
audioSourceNode = audioContext.createMediaElementSource(audioElement);
|
||||||
|
audioSourceNode.connect(analyser);
|
||||||
|
analyser.connect(audioContext.destination);
|
||||||
|
audioElement.play();
|
||||||
|
isListening = true;
|
||||||
|
return;
|
||||||
|
} else if (audioSource === "tab") {
|
||||||
|
// Tab audio capture via getDisplayMedia (Chrome/Edge only)
|
||||||
|
stream = await navigator.mediaDevices.getDisplayMedia({
|
||||||
|
video: { width: 1, height: 1, frameRate: 1 },
|
||||||
|
audio: {
|
||||||
|
echoCancellation: false,
|
||||||
|
noiseSuppression: false,
|
||||||
|
autoGainControl: false,
|
||||||
|
systemAudio: "include",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Verify audio tracks exist (user must check "Share tab audio")
|
||||||
|
const audioTracks = stream.getAudioTracks();
|
||||||
|
if (audioTracks.length === 0) {
|
||||||
|
stream.getTracks().forEach((t) => t.stop());
|
||||||
|
throw new Error(
|
||||||
|
'No audio captured. Make sure to check "Share tab audio" in the sharing dialog.',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stop the video track immediately — we only need audio
|
||||||
|
stream.getVideoTracks().forEach((t) => t.stop());
|
||||||
|
|
||||||
|
// Handle stream ending (user clicks "Stop sharing")
|
||||||
|
stream.addEventListener("inactive", () => stopListening());
|
||||||
|
audioTracks.forEach((track) =>
|
||||||
|
track.addEventListener("ended", () => stopListening()),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// "mic" and "link" both use microphone capture
|
||||||
|
// For "link", the user plays music in an embedded/external player
|
||||||
|
// and the mic picks up the audio from speakers
|
||||||
|
stream = await navigator.mediaDevices.getUserMedia({
|
||||||
|
audio: {
|
||||||
|
echoCancellation: false,
|
||||||
|
noiseSuppression: false,
|
||||||
|
autoGainControl: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
currentStream = stream;
|
||||||
|
const source = audioContext.createMediaStreamSource(stream);
|
||||||
|
source.connect(analyser);
|
||||||
|
isListening = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
$: if (analyser) {
|
||||||
|
analyser.smoothingTimeConstant = smoothing;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getProcessedData() {
|
||||||
|
const totalBars = barCount;
|
||||||
|
const halfBars = Math.ceil(totalBars / 2);
|
||||||
|
const usableBins = (bufferLength * FREQ_RANGE) | 0;
|
||||||
|
|
||||||
|
let sum = 0;
|
||||||
|
for (let i = 0; i < halfBars; i++) {
|
||||||
|
const t = i / halfBars;
|
||||||
|
const binIdx = Math.min(
|
||||||
|
usableBins - 1,
|
||||||
|
(Math.pow(t, 1.15) * usableBins) | 0,
|
||||||
|
);
|
||||||
|
const lo = Math.max(0, binIdx - 1);
|
||||||
|
const hi = Math.min(usableBins - 1, binIdx + 1);
|
||||||
|
const raw =
|
||||||
|
((dataArray[lo] || 0) +
|
||||||
|
(dataArray[binIdx] || 0) +
|
||||||
|
(dataArray[hi] || 0)) /
|
||||||
|
3;
|
||||||
|
// Bass emphasis controlled by prop
|
||||||
|
const bassBoost = 1 + (1 - t) * bassEmphasis;
|
||||||
|
// Sensitivity multiplier
|
||||||
|
const normalized = Math.min(1, (raw * bassBoost * sensitivity) / 255);
|
||||||
|
const spiked = Math.pow(normalized, 16.0) * 255;
|
||||||
|
smoothedValues[i] += (spiked - smoothedValues[i]) * SMOOTH_FACTOR;
|
||||||
|
}
|
||||||
|
// Spatial smoothing: blend adjacent bars for a more unified shape
|
||||||
|
for (let pass = 0; pass < 2; pass++) {
|
||||||
|
for (let i = 1; i < halfBars - 1; i++) {
|
||||||
|
smoothedValues[i] =
|
||||||
|
smoothedValues[i - 1] * 0.1 +
|
||||||
|
smoothedValues[i] * 0.8 +
|
||||||
|
smoothedValues[i + 1] * 0.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 0; i < halfBars; i++) sum += smoothedValues[i];
|
||||||
|
|
||||||
|
const avgLoudness = (sum / halfBars) * INV_255;
|
||||||
|
smoothedLoudness += (avgLoudness - smoothedLoudness) * 0.2;
|
||||||
|
|
||||||
|
return { halfBars, totalBars, sum };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear particles when viz mode changes to avoid stale coordinates
|
||||||
|
let prevVizMode = vizMode;
|
||||||
|
$: if (vizMode !== prevVizMode) {
|
||||||
|
particles = [];
|
||||||
|
prevVizMode = vizMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyWrapperEffects() {
|
||||||
|
const shakeIntensity = 12 * shakeAmount;
|
||||||
|
const zoom = isFinite(zoomIntensity) ? zoomIntensity : 1.0;
|
||||||
|
const targetScale =
|
||||||
|
MIN_SCALE + smoothedLoudness * (MAX_SCALE - MIN_SCALE) * zoom;
|
||||||
|
smoothedScale += (targetScale - smoothedScale) * SCALE_SMOOTH;
|
||||||
|
|
||||||
|
const shakeX = (Math.random() - 0.5) * shakeIntensity * smoothedLoudness;
|
||||||
|
const shakeY = (Math.random() - 0.5) * shakeIntensity * smoothedLoudness;
|
||||||
|
const bloom = 1 + smoothedLoudness * glowIntensity;
|
||||||
|
if (visualizerWrapper) {
|
||||||
|
const isFullViewport = vizMode === "bars" || vizMode === "wave";
|
||||||
|
if (isFullViewport) {
|
||||||
|
visualizerWrapper.style.transform = "none";
|
||||||
|
} else {
|
||||||
|
visualizerWrapper.style.transform = `scale(${smoothedScale}) translate(${shakeX}px, ${shakeY}px)`;
|
||||||
|
}
|
||||||
|
visualizerWrapper.style.filter = `brightness(${bloom})`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawCircular(halfBars, totalBars) {
|
||||||
|
const maxBarHeight = size * 0.25;
|
||||||
|
const barHeights = new Float32Array(totalBars);
|
||||||
|
|
||||||
|
for (let i = 0; i < totalBars; i++) {
|
||||||
|
const dataIdx = i < halfBars ? i : i - halfBars;
|
||||||
|
barHeights[i] =
|
||||||
|
baseRadius + 5 + smoothedValues[dataIdx] * maxBarHeight * INV_255;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build outer points for mirrored halves
|
||||||
|
const outerPoints = [];
|
||||||
|
for (let i = 0; i < halfBars; i++) {
|
||||||
|
const r = barHeights[i] + LINE_LIFT;
|
||||||
|
outerPoints.push({
|
||||||
|
x: centerX + cosValues[i] * r,
|
||||||
|
y: centerY + sinValues[i] * r,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
for (let i = totalBars - 1; i >= halfBars; i--) {
|
||||||
|
const r = barHeights[i] + LINE_LIFT;
|
||||||
|
outerPoints.push({
|
||||||
|
x: centerX + cosValues[i] * r,
|
||||||
|
y: centerY + sinValues[i] * r,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw filled area from circle edge to outer line
|
||||||
|
const len = outerPoints.length;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(outerPoints[0].x, outerPoints[0].y);
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
const curr = outerPoints[i];
|
||||||
|
const next = outerPoints[(i + 1) % len];
|
||||||
|
const mx = (curr.x + next.x) / 2;
|
||||||
|
const my = (curr.y + next.y) / 2;
|
||||||
|
ctx.quadraticCurveTo(curr.x, curr.y, mx, my);
|
||||||
|
}
|
||||||
|
ctx.closePath();
|
||||||
|
|
||||||
|
// Cut out the inner circle
|
||||||
|
ctx.moveTo(centerX + baseRadius, centerY);
|
||||||
|
ctx.arc(centerX, centerY, baseRadius, 0, Math.PI * 2, true);
|
||||||
|
|
||||||
|
// Gradient fill
|
||||||
|
const grad = ctx.createRadialGradient(
|
||||||
|
centerX,
|
||||||
|
centerY,
|
||||||
|
baseRadius,
|
||||||
|
centerX,
|
||||||
|
centerY,
|
||||||
|
size * 0.48,
|
||||||
|
);
|
||||||
|
grad.addColorStop(0, colors.secondary);
|
||||||
|
grad.addColorStop(1, colors.primary);
|
||||||
|
ctx.fillStyle = grad;
|
||||||
|
ctx.fill("evenodd");
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawBars(halfBars) {
|
||||||
|
const totalBarsToShow = halfBars;
|
||||||
|
const barGap = 3;
|
||||||
|
const totalWidth = canvas.width;
|
||||||
|
const barWidth = Math.max(
|
||||||
|
2,
|
||||||
|
(totalWidth - (totalBarsToShow - 1) * barGap) / totalBarsToShow,
|
||||||
|
);
|
||||||
|
const maxBarHeight = canvas.height * 0.7;
|
||||||
|
const startX = 0;
|
||||||
|
const bottomY = canvas.height;
|
||||||
|
|
||||||
|
const grad = ctx.createLinearGradient(
|
||||||
|
0,
|
||||||
|
bottomY - maxBarHeight,
|
||||||
|
0,
|
||||||
|
bottomY,
|
||||||
|
);
|
||||||
|
grad.addColorStop(0, colors.primary);
|
||||||
|
grad.addColorStop(1, colors.secondary);
|
||||||
|
ctx.fillStyle = grad;
|
||||||
|
|
||||||
|
for (let i = 0; i < totalBarsToShow; i++) {
|
||||||
|
const val = smoothedValues[i] * INV_255;
|
||||||
|
const h = Math.max(2, val * maxBarHeight);
|
||||||
|
const x = startX + i * (barWidth + barGap);
|
||||||
|
const radius = Math.min(barWidth / 2, 4);
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x + radius, bottomY - h);
|
||||||
|
ctx.lineTo(x + barWidth - radius, bottomY - h);
|
||||||
|
ctx.quadraticCurveTo(
|
||||||
|
x + barWidth,
|
||||||
|
bottomY - h,
|
||||||
|
x + barWidth,
|
||||||
|
bottomY - h + radius,
|
||||||
|
);
|
||||||
|
ctx.lineTo(x + barWidth, bottomY);
|
||||||
|
ctx.lineTo(x, bottomY);
|
||||||
|
ctx.lineTo(x, bottomY - h + radius);
|
||||||
|
ctx.quadraticCurveTo(x, bottomY - h, x + radius, bottomY - h);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawWave(halfBars) {
|
||||||
|
const totalWidth = canvas.width;
|
||||||
|
const maxAmp = canvas.height * 0.3;
|
||||||
|
const startX = 0;
|
||||||
|
const midY = canvas.height * 0.5;
|
||||||
|
|
||||||
|
// Primary wave
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(startX, midY);
|
||||||
|
for (let i = 0; i < halfBars; i++) {
|
||||||
|
const t = i / (halfBars - 1);
|
||||||
|
const x = startX + t * totalWidth;
|
||||||
|
const val = smoothedValues[i] * INV_255;
|
||||||
|
const y = midY - val * maxAmp;
|
||||||
|
if (i === 0) ctx.moveTo(x, y);
|
||||||
|
else {
|
||||||
|
const prevT = (i - 1) / (halfBars - 1);
|
||||||
|
const prevX = startX + prevT * totalWidth;
|
||||||
|
const cpx = (prevX + x) / 2;
|
||||||
|
ctx.quadraticCurveTo(
|
||||||
|
prevX,
|
||||||
|
midY - smoothedValues[i - 1] * INV_255 * maxAmp,
|
||||||
|
cpx,
|
||||||
|
(midY - smoothedValues[i - 1] * INV_255 * maxAmp + y) / 2,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Close to form filled area
|
||||||
|
ctx.lineTo(startX + totalWidth, midY);
|
||||||
|
ctx.lineTo(startX, midY);
|
||||||
|
ctx.closePath();
|
||||||
|
|
||||||
|
const grad = ctx.createLinearGradient(0, midY - maxAmp, 0, midY);
|
||||||
|
grad.addColorStop(0, colors.primary + "cc");
|
||||||
|
grad.addColorStop(1, colors.primary + "11");
|
||||||
|
ctx.fillStyle = grad;
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Stroke the wave line
|
||||||
|
ctx.beginPath();
|
||||||
|
for (let i = 0; i < halfBars; i++) {
|
||||||
|
const t = i / (halfBars - 1);
|
||||||
|
const x = startX + t * totalWidth;
|
||||||
|
const val = smoothedValues[i] * INV_255;
|
||||||
|
const y = midY - val * maxAmp;
|
||||||
|
if (i === 0) ctx.moveTo(x, y);
|
||||||
|
else ctx.lineTo(x, y);
|
||||||
|
}
|
||||||
|
ctx.strokeStyle = colors.primary;
|
||||||
|
ctx.lineWidth = 2.5;
|
||||||
|
ctx.shadowColor = colors.primary;
|
||||||
|
ctx.shadowBlur = 10 * glowIntensity;
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.shadowBlur = 0;
|
||||||
|
|
||||||
|
// Mirror wave (secondary color, below)
|
||||||
|
ctx.beginPath();
|
||||||
|
for (let i = 0; i < halfBars; i++) {
|
||||||
|
const t = i / (halfBars - 1);
|
||||||
|
const x = startX + t * totalWidth;
|
||||||
|
const val = smoothedValues[i] * INV_255;
|
||||||
|
const y = midY + val * maxAmp * 0.6;
|
||||||
|
if (i === 0) ctx.moveTo(x, y);
|
||||||
|
else ctx.lineTo(x, y);
|
||||||
|
}
|
||||||
|
ctx.lineTo(startX + totalWidth, midY);
|
||||||
|
ctx.lineTo(startX, midY);
|
||||||
|
ctx.closePath();
|
||||||
|
|
||||||
|
const grad2 = ctx.createLinearGradient(0, midY, 0, midY + maxAmp * 0.6);
|
||||||
|
grad2.addColorStop(0, colors.secondary + "11");
|
||||||
|
grad2.addColorStop(1, colors.secondary + "88");
|
||||||
|
ctx.fillStyle = grad2;
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
for (let i = 0; i < halfBars; i++) {
|
||||||
|
const t = i / (halfBars - 1);
|
||||||
|
const x = startX + t * totalWidth;
|
||||||
|
const val = smoothedValues[i] * INV_255;
|
||||||
|
const y = midY + val * maxAmp * 0.6;
|
||||||
|
if (i === 0) ctx.moveTo(x, y);
|
||||||
|
else ctx.lineTo(x, y);
|
||||||
|
}
|
||||||
|
ctx.strokeStyle = colors.secondary;
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.shadowColor = colors.secondary;
|
||||||
|
ctx.shadowBlur = 8 * glowIntensity;
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.shadowBlur = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawBlob(halfBars) {
|
||||||
|
blobPhase += 0.008;
|
||||||
|
const points = 64;
|
||||||
|
const maxDeform = size * 0.2;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
for (let i = 0; i <= points; i++) {
|
||||||
|
const angle = (i / points) * Math.PI * 2;
|
||||||
|
// Map angle to frequency bin
|
||||||
|
const freqIdx = Math.floor((i / points) * halfBars) % halfBars;
|
||||||
|
const val = smoothedValues[freqIdx] * INV_255;
|
||||||
|
// Perlin-like noise via layered sin
|
||||||
|
const noise =
|
||||||
|
Math.sin(angle * 3 + blobPhase) * 0.3 +
|
||||||
|
Math.sin(angle * 5 - blobPhase * 1.3) * 0.2 +
|
||||||
|
Math.sin(angle * 7 + blobPhase * 0.7) * 0.1;
|
||||||
|
const r = baseRadius + val * maxDeform + noise * maxDeform * 0.3;
|
||||||
|
const x = centerX + Math.cos(angle) * r;
|
||||||
|
const y = centerY + Math.sin(angle) * r;
|
||||||
|
if (i === 0) ctx.moveTo(x, y);
|
||||||
|
else ctx.lineTo(x, y);
|
||||||
|
}
|
||||||
|
ctx.closePath();
|
||||||
|
|
||||||
|
const grad = ctx.createRadialGradient(
|
||||||
|
centerX,
|
||||||
|
centerY,
|
||||||
|
0,
|
||||||
|
centerX,
|
||||||
|
centerY,
|
||||||
|
baseRadius + maxDeform,
|
||||||
|
);
|
||||||
|
grad.addColorStop(0, colors.secondary + "dd");
|
||||||
|
grad.addColorStop(0.5, colors.primary + "88");
|
||||||
|
grad.addColorStop(1, colors.primary + "22");
|
||||||
|
ctx.fillStyle = grad;
|
||||||
|
ctx.shadowColor = colors.primary;
|
||||||
|
ctx.shadowBlur = 20 * glowIntensity;
|
||||||
|
ctx.fill();
|
||||||
|
ctx.shadowBlur = 0;
|
||||||
|
|
||||||
|
// Inner glow circle
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(centerX, centerY, baseRadius * 0.95, 0, Math.PI * 2);
|
||||||
|
const innerGrad = ctx.createRadialGradient(
|
||||||
|
centerX,
|
||||||
|
centerY,
|
||||||
|
0,
|
||||||
|
centerX,
|
||||||
|
centerY,
|
||||||
|
baseRadius,
|
||||||
|
);
|
||||||
|
innerGrad.addColorStop(0, colors.secondary + "44");
|
||||||
|
innerGrad.addColorStop(1, colors.secondary + "00");
|
||||||
|
ctx.fillStyle = innerGrad;
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
if (!ctx) return;
|
||||||
|
|
||||||
|
const useFullViewport = vizMode === "bars" || vizMode === "wave";
|
||||||
|
const cw = useFullViewport
|
||||||
|
? window.innerWidth
|
||||||
|
: Math.ceil(size * CANVAS_PAD);
|
||||||
|
const ch = useFullViewport
|
||||||
|
? window.innerHeight
|
||||||
|
: Math.ceil(size * CANVAS_PAD);
|
||||||
|
if (canvas.width !== cw || canvas.height !== ch) {
|
||||||
|
canvas.width = cw;
|
||||||
|
canvas.height = ch;
|
||||||
|
}
|
||||||
|
ctx.clearRect(0, 0, cw, ch);
|
||||||
|
|
||||||
|
if (analyser) {
|
||||||
|
analyser.getByteFrequencyData(dataArray);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (useFullViewport) {
|
||||||
|
centerX = cw / 2;
|
||||||
|
centerY = ch / 2;
|
||||||
|
} else {
|
||||||
|
const offset = (cw - size) / 2;
|
||||||
|
centerX = offset + size / 2;
|
||||||
|
centerY = offset + size / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { halfBars, totalBars } = getProcessedData();
|
||||||
|
|
||||||
|
applyWrapperEffects();
|
||||||
|
spawnParticles(smoothedLoudness);
|
||||||
|
|
||||||
|
// Draw based on selected mode
|
||||||
|
switch (vizMode) {
|
||||||
|
case "bars":
|
||||||
|
drawBars(halfBars);
|
||||||
|
break;
|
||||||
|
case "wave":
|
||||||
|
drawWave(halfBars);
|
||||||
|
break;
|
||||||
|
case "blob":
|
||||||
|
drawBlob(halfBars);
|
||||||
|
break;
|
||||||
|
case "circular":
|
||||||
|
default:
|
||||||
|
drawCircular(halfBars, totalBars);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw particles on top
|
||||||
|
updateAndDrawParticles();
|
||||||
|
|
||||||
|
animationId = requestAnimationFrame(draw);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSize() {
|
||||||
|
size = Math.min(window.innerWidth, window.innerHeight) * 0.65;
|
||||||
|
baseRadius = size * 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function startListening() {
|
||||||
|
try {
|
||||||
|
await initAudio();
|
||||||
|
draw();
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to start audio:", err);
|
||||||
|
alert(err.message || "Failed to start audio. Check browser permissions.");
|
||||||
|
// Clean up partial state
|
||||||
|
if (audioContext) {
|
||||||
|
audioContext.close().catch(() => {});
|
||||||
|
audioContext = null;
|
||||||
|
}
|
||||||
|
isListening = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function stopListening() {
|
||||||
|
if (animationId) cancelAnimationFrame(animationId);
|
||||||
|
if (audioElement) {
|
||||||
|
audioElement.pause();
|
||||||
|
audioElement.currentTime = 0;
|
||||||
|
}
|
||||||
|
if (currentStream) {
|
||||||
|
currentStream.getTracks().forEach((t) => t.stop());
|
||||||
|
currentStream = null;
|
||||||
|
}
|
||||||
|
if (audioContext) {
|
||||||
|
audioContext.close();
|
||||||
|
audioContext = null;
|
||||||
|
}
|
||||||
|
audioSourceNode = null;
|
||||||
|
isListening = false;
|
||||||
|
dataArray = new Uint8Array(bufferLength);
|
||||||
|
draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
export let fileCurrentTime = 0;
|
||||||
|
export let fileDuration = 0;
|
||||||
|
export let filePlaying = false;
|
||||||
|
export let fileName = "";
|
||||||
|
|
||||||
|
export function setAudioFile(file) {
|
||||||
|
if (audioElement) {
|
||||||
|
audioElement.pause();
|
||||||
|
URL.revokeObjectURL(audioElement.src);
|
||||||
|
}
|
||||||
|
audioElement = new Audio();
|
||||||
|
audioElement.crossOrigin = "anonymous";
|
||||||
|
audioElement.src = URL.createObjectURL(file);
|
||||||
|
audioElement.loop = true;
|
||||||
|
fileName = file.name;
|
||||||
|
filePlaying = false;
|
||||||
|
fileCurrentTime = 0;
|
||||||
|
fileDuration = 0;
|
||||||
|
|
||||||
|
audioElement.addEventListener("loadedmetadata", () => {
|
||||||
|
fileDuration = audioElement.duration;
|
||||||
|
});
|
||||||
|
audioElement.addEventListener("timeupdate", () => {
|
||||||
|
fileCurrentTime = audioElement.currentTime;
|
||||||
|
});
|
||||||
|
audioElement.addEventListener("play", () => {
|
||||||
|
filePlaying = true;
|
||||||
|
});
|
||||||
|
audioElement.addEventListener("pause", () => {
|
||||||
|
filePlaying = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function pauseAudio() {
|
||||||
|
if (audioElement) {
|
||||||
|
audioElement.pause();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resumeAudio() {
|
||||||
|
if (audioElement) {
|
||||||
|
audioElement.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function seekAudio(time) {
|
||||||
|
if (audioElement) {
|
||||||
|
audioElement.currentTime = time;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function takeScreenshot() {
|
||||||
|
if (!canvas) return null;
|
||||||
|
return canvas.toDataURL("image/png");
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
ctx = canvas.getContext("2d");
|
||||||
|
precalculateAngles();
|
||||||
|
updateSize();
|
||||||
|
window.addEventListener("resize", updateSize);
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
if (animationId) cancelAnimationFrame(animationId);
|
||||||
|
if (audioContext) audioContext.close();
|
||||||
|
window.removeEventListener("resize", updateSize);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="visualizer-container">
|
||||||
|
<div class="visualizer-wrapper" bind:this={visualizerWrapper}>
|
||||||
|
<canvas
|
||||||
|
bind:this={canvas}
|
||||||
|
width={Math.ceil(size * CANVAS_PAD)}
|
||||||
|
height={Math.ceil(size * CANVAS_PAD)}
|
||||||
|
></canvas>
|
||||||
|
{#if logoUrl}
|
||||||
|
<div
|
||||||
|
class="logo-container"
|
||||||
|
style="width: {baseRadius * 2}px; height: {baseRadius * 2}px; {logoSpin
|
||||||
|
? `animation: logo-spin ${Math.max(0.5, 20 / logoSpinSpeed)}s linear infinite`
|
||||||
|
: ''}"
|
||||||
|
>
|
||||||
|
<img src={logoUrl} alt="Logo" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.visualizer-container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visualizer-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: transform 0.05s linear;
|
||||||
|
will-change: transform;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle,
|
||||||
|
rgba(20, 20, 30, 0.95),
|
||||||
|
rgba(10, 10, 15, 0.98)
|
||||||
|
);
|
||||||
|
border: none;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes logo-spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1348
src/lib/Controls.svelte
Normal file
1348
src/lib/Controls.svelte
Normal file
File diff suppressed because it is too large
Load Diff
BIN
src/lib/assets/lapikud.png
Normal file
BIN
src/lib/assets/lapikud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
7
src/main.js
Normal file
7
src/main.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import App from './App.svelte';
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: document.getElementById('app')
|
||||||
|
});
|
||||||
|
|
||||||
|
export default app;
|
||||||
6
vite.config.js
Normal file
6
vite.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import { svelte } from '@sveltejs/vite-plugin-svelte';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [svelte()]
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user