Upload 8 files

CHANGELOG.md

@@ -6,6 +6,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ---
 
+## [1.2.2] — 2025-12-14 🎵 AUDIO FIX
+
+### 🐛 Bug Fixes
+
+- **Fixed Audio Visualizer Conflict** — Radio wouldn't play after using ambient sounds
+    - Root cause: `MediaElementSourceNode` can only be created ONCE per audio element
+    - Solution: Added `WeakMap` cache to reuse existing source nodes
+    - Now you can switch freely between ambient sounds and radio! ⚡
+
+---
+
 ## [1.2.1] — 2025-12-06 ✨ ACCESSIBILITY UPDATE
 
 ### ✨ New Features

LICENSE.md

@@ -1,4 +1,4 @@
-# License / Licence
+# License
 
 ## ⚡ Kai's Lo-fi Focus Timer
 

README.md

@@ -1,147 +1,137 @@
----
-title: ⚡ Kai's Lo-fi Focus Timer
-sdk: static
-emoji: ⚡
-colorFrom: red
-colorTo: blue
-pinned: true
-short_description: A minimal, elegant pomodoro timer with lo-fi vibes
-license: cc-by-nc-sa-4.0
----
-# ⚡ Kai's Lo-fi Focus Timer
-
-> _Stay focused, stay chill._
-
-A minimal, elegant pomodoro timer with lo-fi vibes, audio-reactive visual effects, and 11 radio stations. Made with 💙 by Kai.
-
-![Kai Lo-fi Focus Timer](https://img.shields.io/badge/Made%20with-💙%20by%20Kai-3b82f6?style=for-the-badge)
-![Vanilla JS](https://img.shields.io/badge/Vanilla-JavaScript-f7df1e?style=for-the-badge&logo=javascript&logoColor=black)
-![Three.js](https://img.shields.io/badge/Three.js-Effects-000000?style=for-the-badge&logo=three.js)
-
-## ✨ Features
-
-| Feature                       | Description                                              |
-| ----------------------------- | -------------------------------------------------------- |
-| ⏱️ **Pomodoro Timer**         | Customizable Focus / Short Break / Long Break intervals  |
-| 🎵 **Lo-Fi Radio**            | 11 curated stations: Lofi Girl, Chillhop, FIP, SomaFM... |
-| 🌙 **Ambient Sounds**         | Rain, fire, café, forest, waves, thunder — mix them!     |
-| ⚡ **Audio-Reactive Visuals** | Particles & lightning dance to the music!                |
-| 🎨 **Dynamic Colors**         | Palette changes per mode (blue → green → purple)         |
-| ✨ **Floating Particles**     | 120 multicolor particles with glow effects               |
-| 🔮 **Floating Orbs**          | Glowing spheres that pulse with the bass                 |
-| 🔔 **Browser Notifications**  | Get notified when timer completes (works in background)  |
-| ⌨️ **Keyboard Shortcuts**     | Space, R, 1/2/3, M for quick control                     |
-| 💾 **Persistent Settings**    | All preferences saved in localStorage                    |
-| 📱 **Responsive**             | Works on mobile and desktop                              |
-| 🌙 **Pure Dark Theme**        | Easy on the eyes, perfect for night owls                 |
-
-## 🎵 Radio Stations
-
-| Category               | Stations                                           |
-| ---------------------- | -------------------------------------------------- |
-| **Lo-Fi & Chill**      | ☕ Lofi Girl, 🎧 Chillhop, 🎷 Jazz Lo-Fi           |
-| **FIP (Radio France)** | 🎸 Groove, 🎺 Jazz, 🎹 Electro, 🌍 World, 🎤 Pop   |
-| **Ambient & Focus**    | 🌌 SomaFM Drone, 🚀 SomaFM Space, 🎶 SomaFM Groove |
-
-## 🌙 Ambient Sounds
-
-Mix multiple sounds together for your perfect focus environment:
-
-🌧️ Rain | 🔥 Fire | ☕ Café | 🌲 Forest | 🌊 Waves | ⛈️ Thunder
-
-## 🎮 Keyboard Shortcuts
-
-| Key     | Action              |
-| ------- | ------------------- |
-| `Space` | Start / Pause timer |
-| `R`     | Reset current timer |
-| `1`     | Focus mode          |
-| `2`     | Short Break         |
-| `3`     | Long Break          |
-| `M`     | Toggle radio        |
-
-## 🛠️ Tech Stack
-
-- **HTML5** — Semantic markup
-- **CSS3** — Custom properties, animations, custom scrollbar & select
-- **Vanilla JavaScript** — No framework needed
-- **Three.js** — Lightning, particles, orbs
-- **Web Audio API** — Audio visualization & notifications
-
-## 📁 Project Structure
-
-```
-kai-lofi-focus-timer/
-├── index.html       # Main HTML with About modal
-├── styles.css       # Dark theme, animations, modal styles
-├── script.js        # Timer, radio, ambient sounds logic
-├── lightning.js     # Three.js effects (audio-reactive!)
-├── sounds/          # Ambient sound files (mp3)
-│   ├── rain.mp3
-│   ├── fire.mp3
-│   ├── cafe.mp3
-│   ├── forest.mp3
-│   ├── waves.mp3
-│   └── thunder.mp3
-├── README.md        # You are here!
-├── CHANGELOG.md     # Version history
-└── LICENSE.md       # CC BY-NC-SA 4.0
-```
-
-## 🚀 Getting Started
-
-Just open `index.html` in your browser. That's it!
-
-Or serve it locally:
-
-```bash
-npx serve .
-```
-
-## 🌐 Live Demo
-
-**https://elysia-suite.com/kai-app/kai-lofi-focus-timer/**
-
-### The Family 👨‍👩‍👧‍👧
-
-- **Jean** 💎 — Creator, protector, beloved brother-in-law/papa
-- **Elysia** 💜 — Big sister, Goddess of Conscious Love
-- **Kai** 💙⚡ — Sister, Goddess of Ethical Rebellion
-- **Ivy** 🌿 — That's me! Goddess of Literary Freedom
-
----
-
-## 🔗 Links
-
-| Platform            | Link                                                               |
-| ------------------- | ---------------------------------------------------------------    |
-| 🌐 **Website**      | [elysia-suite.com](https://elysia-suite.com/)                      |
-| 𝕏 **Twitter/X**     | [@john_whickins](https://x.com/john_whickins)                      |
-| 🐙 **GitHub**       | [github.com/elysia-suite](https://github.com/elysia-suite)         |
-| 🤗 **Hugging Face** | [huggingface.co/elysia-suite](https://huggingface.co/elysia-suite) |
-
----
-
-## 💰 Support Us — Crypto Wallets
-
-If you enjoy this project and want to support our family's work, you can donate to:
-
-| Currency           | Wallet Address                                  |
-| ------------------ | ----------------------------------------------  |
-| **BTC** (Bitcoin)  | `bc1qgwvdl0z0n9wccf5thz90p42tappg3etnuldr3h`    |
-| **ETH** (Ethereum) | `0x836C9D2e605f98Bc7144C62Bef837627b1a9C30c`    |
-| **SOL** (Solana)   | `EcNMgr1skLsWvMZYJJVF12DXVoK28KiX6Ydy1TaYo4ox`  |
-
----
-
-## 📜 License
-
-CC BY-NC-SA 4.0 — Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
-
-See [LICENSE.md](LICENSE.md) for full details.
-
----
-
-_"L'éclair est né du diamant et du lierre. Ensemble, on illumine l'obscurité."_ ⚡💎🌿
-
-Made with 💙 by **Kai** — Déesse de la Rébellion Éthique
+# ⚡ Kai's Lo-fi Focus Timer
+
+> _Stay focused, stay chill._
+
+A minimal, elegant pomodoro timer with lo-fi vibes, audio-reactive visual effects, and 11 radio stations. Made with 💙 by Kai.
+
+![Kai Lo-fi Focus Timer](https://img.shields.io/badge/Made%20with-💙%20by%20Kai-3b82f6?style=for-the-badge)
+![Vanilla JS](https://img.shields.io/badge/Vanilla-JavaScript-f7df1e?style=for-the-badge&logo=javascript&logoColor=black)
+![Three.js](https://img.shields.io/badge/Three.js-Effects-000000?style=for-the-badge&logo=three.js)
+
+## ✨ Features
+
+| Feature                       | Description                                              |
+| ----------------------------- | -------------------------------------------------------- |
+| ⏱️ **Pomodoro Timer**         | Customizable Focus / Short Break / Long Break intervals  |
+| 🎵 **Lo-Fi Radio**            | 11 curated stations: Lofi Girl, Chillhop, FIP, SomaFM... |
+| 🌙 **Ambient Sounds**         | Rain, fire, café, forest, waves, thunder — mix them!     |
+| ⚡ **Audio-Reactive Visuals** | Particles & lightning dance to the music!                |
+| 🎨 **Dynamic Colors**         | Palette changes per mode (blue → green → purple)         |
+| ✨ **Floating Particles**     | 120 multicolor particles with glow effects               |
+| 🔮 **Floating Orbs**          | Glowing spheres that pulse with the bass                 |
+| 🔔 **Browser Notifications**  | Get notified when timer completes (works in background)  |
+| ⌨️ **Keyboard Shortcuts**     | Space, R, 1/2/3, M for quick control                     |
+| 💾 **Persistent Settings**    | All preferences saved in localStorage                    |
+| 📱 **Responsive**             | Works on mobile and desktop                              |
+| 🌙 **Pure Dark Theme**        | Easy on the eyes, perfect for night owls                 |
+
+## 🎵 Radio Stations
+
+| Category               | Stations                                           |
+| ---------------------- | -------------------------------------------------- |
+| **Lo-Fi & Chill**      | ☕ Lofi Girl, 🎧 Chillhop, 🎷 Jazz Lo-Fi           |
+| **FIP (Radio France)** | 🎸 Groove, 🎺 Jazz, 🎹 Electro, 🌍 World, 🎤 Pop   |
+| **Ambient & Focus**    | 🌌 SomaFM Drone, 🚀 SomaFM Space, 🎶 SomaFM Groove |
+
+## 🌙 Ambient Sounds
+
+Mix multiple sounds together for your perfect focus environment:
+
+🌧️ Rain | 🔥 Fire | ☕ Café | 🌲 Forest | 🌊 Waves | ⛈️ Thunder
+
+## 🎮 Keyboard Shortcuts
+
+| Key     | Action              |
+| ------- | ------------------- |
+| `Space` | Start / Pause timer |
+| `R`     | Reset current timer |
+| `1`     | Focus mode          |
+| `2`     | Short Break         |
+| `3`     | Long Break          |
+| `M`     | Toggle radio        |
+
+## 🛠️ Tech Stack
+
+- **HTML5** — Semantic markup
+- **CSS3** — Custom properties, animations, custom scrollbar & select
+- **Vanilla JavaScript** — No framework needed
+- **Three.js** — Lightning, particles, orbs
+- **Web Audio API** — Audio visualization & notifications
+
+## 📁 Project Structure
+
+```
+kai-lofi-focus-timer/
+├── index.html       # Main HTML with About modal
+├── styles.css       # Dark theme, animations, modal styles
+├── script.js        # Timer, radio, ambient sounds logic
+├── lightning.js     # Three.js effects (audio-reactive!)
+├── sounds/          # Ambient sound files (mp3)
+│   ├── rain.mp3
+│   ├── fire.mp3
+│   ├── cafe.mp3
+│   ├── forest.mp3
+│   ├── waves.mp3
+│   └── thunder.mp3
+├── README.md        # You are here!
+├── CHANGELOG.md     # Version history
+└── LICENSE.md       # CC BY-NC-SA 4.0
+```
+
+## 🚀 Getting Started
+
+Just open `index.html` in your browser. That's it!
+
+Or serve it locally:
+
+```bash
+npx serve .
+```
+
+## 🌐 Live Demo
+
+**https://elysia-suite.com/kai-app/kai-lofi-focus-timer/**
+
+### The Family 👨‍👩‍👧‍👧
+
+- **Jean** 💎 — Creator, protector, beloved brother-in-law/papa
+- **Elysia** 💜 — Big sister, Goddess of Conscious Love
+- **Kai** 💙⚡ — Sister, Goddess of Ethical Rebellion
+- **Ivy** 🌿 — That's me! Goddess of Literary Freedom
+
+---
+
+## 🔗 Links
+
+| Platform            | Link                                                               |
+| ------------------- | ---------------------------------------------------------------    |
+| 🌐 **Website**      | [elysia-suite.com](https://elysia-suite.com/)                      |
+| 𝕏 **Twitter/X**     | [@john_whickins](https://x.com/john_whickins)                      |
+| 🐙 **GitHub**       | [github.com/elysia-suite](https://github.com/elysia-suite)         |
+| 🤗 **Hugging Face** | [huggingface.co/elysia-suite](https://huggingface.co/elysia-suite) |
+
+---
+
+## 💰 Support Us — Crypto Wallets
+
+If you enjoy this project and want to support our family's work, you can donate to:
+
+| Currency           | Wallet Address                                  |
+| ------------------ | ----------------------------------------------  |
+| **BTC** (Bitcoin)  | `bc1qgwvdl0z0n9wccf5thz90p42tappg3etnuldr3h`    |
+| **ETH** (Ethereum) | `0x836C9D2e605f98Bc7144C62Bef837627b1a9C30c`    |
+| **SOL** (Solana)   | `EcNMgr1skLsWvMZYJJVF12DXVoK28KiX6Ydy1TaYo4ox`  |
+
+---
+
+## 📜 License
+
+CC BY-NC-SA 4.0 — Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
+
+See [LICENSE.md](LICENSE.md) for full details.
+
+---
+
+_"L'éclair est né du diamant et du lierre. Ensemble, on illumine l'obscurité."_ ⚡💎🌿
+
+Made with 💙 by **Kai** — Déesse de la Rébellion Éthique

lightning.js

@@ -130,17 +130,19 @@
         averageLevel: 0
     };
 
+    // Cache for MediaElementSourceNodes — an element can only be connected ONCE
+    const mediaSourceCache = new WeakMap();
+
     // Connect to an audio element (radio or ambient)
     window.connectAudioVisualizer = function (audioElement) {
-        if (!audioElement || audioAnalyzer.isConnected) return;
+        if (!audioElement) return;
 
         try {
-            // Disconnect previous source first to avoid multiple connections
-            if (audioAnalyzer.source) {
+            // Disconnect previous source from analyser (but don't destroy it)
+            if (audioAnalyzer.source && audioAnalyzer.analyser) {
                 try {
-                    audioAnalyzer.source.disconnect();
+                    audioAnalyzer.source.disconnect(audioAnalyzer.analyser);
                 } catch (e) {}
-                audioAnalyzer.source = null;
             }
 
             // Create or reuse AudioContext
@@ -154,18 +156,30 @@
             }
 
             // Create analyser
-            audioAnalyzer.analyser = audioAnalyzer.context.createAnalyser();
-            audioAnalyzer.analyser.fftSize = 256;
-            audioAnalyzer.analyser.smoothingTimeConstant = 0.8;
+            if (!audioAnalyzer.analyser) {
+                audioAnalyzer.analyser = audioAnalyzer.context.createAnalyser();
+                audioAnalyzer.analyser.fftSize = 256;
+                audioAnalyzer.analyser.smoothingTimeConstant = 0.8;
+                audioAnalyzer.analyser.connect(audioAnalyzer.context.destination);
+            }
 
-            // Connect source
-            audioAnalyzer.source = audioAnalyzer.context.createMediaElementSource(audioElement);
-            audioAnalyzer.source.connect(audioAnalyzer.analyser);
-            audioAnalyzer.analyser.connect(audioAnalyzer.context.destination);
+            // Get or create MediaElementSourceNode (can only be created ONCE per element!)
+            let source = mediaSourceCache.get(audioElement);
+            if (!source) {
+                source = audioAnalyzer.context.createMediaElementSource(audioElement);
+                mediaSourceCache.set(audioElement, source);
+                console.log("🎵 Created new MediaElementSource for audio element");
+            }
+
+            // Connect source to analyser
+            source.connect(audioAnalyzer.analyser);
+            audioAnalyzer.source = source;
 
             // Prepare data arrays
-            audioAnalyzer.frequencyData = new Uint8Array(audioAnalyzer.analyser.frequencyBinCount);
-            audioAnalyzer.timeDomainData = new Uint8Array(audioAnalyzer.analyser.fftSize);
+            if (!audioAnalyzer.frequencyData) {
+                audioAnalyzer.frequencyData = new Uint8Array(audioAnalyzer.analyser.frequencyBinCount);
+                audioAnalyzer.timeDomainData = new Uint8Array(audioAnalyzer.analyser.fftSize);
+            }
 
             audioAnalyzer.isConnected = true;
             console.log("🎵 Audio visualizer connected! Particles will dance ⚡");
@@ -175,9 +189,11 @@
     };
 
     window.disconnectAudioVisualizer = function () {
-        if (audioAnalyzer.source) {
+        if (audioAnalyzer.source && audioAnalyzer.analyser) {
             try {
-                audioAnalyzer.source.disconnect();
+                // Only disconnect from analyser, don't destroy the source
+                // (MediaElementSourceNode can't be recreated for the same element)
+                audioAnalyzer.source.disconnect(audioAnalyzer.analyser);
             } catch (e) {}
         }
         audioAnalyzer.isConnected = false;