feat(audio): Haus ambient sounds + YouTube player fix

WhiteNoise replaced with full ambient mixer:
- 6 categories: Noise, Rain, Nature, Places, Things, Animals
- 29 real ambient sounds from Haus (MIT licensed)
- Howler.js for playback with looping and per-sound volume
- Mix multiple sounds simultaneously
- Category tab navigation
- 300ms fade in/out for smooth toggling

MusicPlayer fixes:
- Removed origin param (causes issues behind reverse proxy)
- Added onError handler for YouTube errors
- Added onStateChange to track playing state
- Player container 1x1 opacity:0 instead of offscreen positioning
This commit is contained in:
2026-06-05 15:12:51 -04:00
parent 5131eb729f
commit 5dbe30b43c
95 changed files with 256 additions and 245 deletions
+25 -10
View File
@@ -8,6 +8,7 @@
"name": "kira",
"version": "0.1.0",
"dependencies": {
"howler": "^2.2.4",
"pixi-live2d-display": "^0.4.0",
"pixi.js": "^7.4.3",
"react": "^19.2.6",
@@ -15,13 +16,14 @@
},
"devDependencies": {
"@tailwindcss/vite": "^4.1.6",
"@types/howler": "^2.2.13",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1",
"autoprefixer": "^10.4.20",
"postcss": "^8.5.3",
"tailwindcss": "^4.1.6",
"typescript": "~6.0.2",
"typescript": "^6.0.3",
"vite": "^8.0.12"
}
},
@@ -871,6 +873,13 @@
"integrity": "sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ==",
"license": "MIT"
},
"node_modules/@types/howler": {
"version": "2.2.13",
"resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.2.13.tgz",
"integrity": "sha512-40+EBjqIHHrC4VShlz/7i0lBUsE3QkgzZinQQji74Hd8sBkJZUBaT7LWFLK6rcabsDOOQpoMbEJvtaFQwxOu/g==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/offscreencanvas": {
"version": "2019.7.3",
"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
@@ -998,9 +1007,9 @@
"license": "MIT"
},
"node_modules/baseline-browser-mapping": {
"version": "2.10.33",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.33.tgz",
"integrity": "sha512-bA6+tcSLpz2tIEdDXZPpPTIuxBcC4+w6SieaYyfigIa4h8GlFxbA17v22Vx3JUtuZQj9SgOsnbK+aTBzyDyEuw==",
"version": "2.10.34",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.34.tgz",
"integrity": "sha512-IMDedajPifLnHNY0X9n8hKxRTQ6/eTHwr5bDo04WnuqxyKw6LYtQywCuuqPZwhl3aBXMvQpJov42GLCwRRdQzw==",
"dev": true,
"license": "Apache-2.0",
"bin": {
@@ -1160,9 +1169,9 @@
"license": "ISC"
},
"node_modules/electron-to-chromium": {
"version": "1.5.367",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.367.tgz",
"integrity": "sha512-4Mk/mrynCNQ+atY40D3UpmhLWB6AHMbYMlIrPhHcMF6x0L7O0b052FCAsxw1LlaR++UFuNg3D/A6XCuGDa0guQ==",
"version": "1.5.368",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.368.tgz",
"integrity": "sha512-7RckJJK4uESJF9PxvfMWd3TGqIiieUTG4HxnKaKuIpGbcr+r2ZEB3g2gAhCP3Fqm42vJSzLfgab9eva/C4/XVw==",
"dev": true,
"license": "ISC"
},
@@ -1173,9 +1182,9 @@
"license": "MIT"
},
"node_modules/enhanced-resolve": {
"version": "5.22.2",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.22.2.tgz",
"integrity": "sha512-0rxICaFZ7NQho/sHely2bvOPRP0Eu2B0NZ9zM54YvRvWMn7jfz3DmnOZDR9LlXDdDcqntAVc6Hfy4gr/tdH/Ag==",
"version": "5.23.0",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.23.0.tgz",
"integrity": "sha512-yJN/BOOLxcOW2aQgeif9mSnaUB8KtvmMMp56oA1kx1CRfBKbhZm2pJ+NBY+3eOboHxix8lfjWpHE0Ei5U8RbSA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1512,6 +1521,12 @@
"node": ">= 0.4"
}
},
"node_modules/howler": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz",
"integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==",
"license": "MIT"
},
"node_modules/inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",