Hugging Face's logo

Spaces:
ThreeSixNine
/
soniczen-wave-generator
Running

App Files Community
ThreeSixNine commited on
Commit
ec4b239
·
verified ·
1 Parent(s): 74e0716

Create a site like this one https://mynoise.net/NoiseMachines/binauralBrainwaveGenerator.php

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +476 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Soniczen Wave Generator
3
- emoji: 🐢
4
  colorFrom: pink
5
- colorTo: red
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: SonicZen Wave Generator 🎵
 
3
  colorFrom: pink
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,477 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SonicZen Wave Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
11
+ <style>
12
+ .wave-control {
13
+ background: linear-gradient(to right, #4f46e5, #7c3aed);
14
+ height: 8px;
15
+ border-radius: 4px;
16
+ }
17
+ .wave-control::-webkit-slider-thumb {
18
+ -webkit-appearance: none;
19
+ width: 20px;
20
+ height: 20px;
21
+ border-radius: 50%;
22
+ background: white;
23
+ cursor: pointer;
24
+ box-shadow: 0 0 10px rgba(0,0,0,0.2);
25
+ }
26
+ .preset-btn {
27
+ transition: all 0.3s ease;
28
+ }
29
+ .preset-btn:hover {
30
+ transform: translateY(-2px);
31
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
32
+ }
33
+ .frequency-display {
34
+ font-family: monospace;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-100 min-h-screen">
39
+ <div class="container mx-auto px-4 py-8">
40
+ <!-- Header -->
41
+ <header class="text-center mb-12">
42
+ <h1 class="text-4xl font-bold text-indigo-700 mb-2">SonicZen Wave Generator</h1>
43
+ <p class="text-lg text-gray-600">Binaural Beats & Brainwave Entrainment</p>
44
+ </header>
45
+
46
+ <!-- Main Content -->
47
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
48
+ <!-- Left Panel - Controls -->
49
+ <div class="bg-white rounded-xl shadow-lg p-6">
50
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
51
+ <i data-feather="sliders" class="mr-2"></i> Wave Controls
52
+ </h2>
53
+
54
+ <!-- Frequency Control -->
55
+ <div class="mb-8">
56
+ <div class="flex justify-between items-center mb-2">
57
+ <label class="text-gray-700 font-medium">Frequency (Hz)</label>
58
+ <span class="frequency-display text-indigo-600 font-bold">440</span>
59
+ </div>
60
+ <input type="range" min="20" max="2000" value="440" class="wave-control w-full" id="frequencyControl">
61
+ </div>
62
+
63
+ <!-- Wave Type Selector -->
64
+ <div class="mb-8">
65
+ <label class="text-gray-700 font-medium block mb-2">Wave Type</label>
66
+ <div class="grid grid-cols-2 gap-2">
67
+ <button class="wave-type-btn preset-btn bg-indigo-100 text-indigo-700 py-2 px-4 rounded-lg" data-type="sine">
68
+ <i data-feather="activity" class="mr-2"></i> Sine
69
+ </button>
70
+ <button class="wave-type-btn preset-btn bg-indigo-100 text-indigo-700 py-2 px-4 rounded-lg" data-type="square">
71
+ <i data-feather="square" class="mr-2"></i> Square
72
+ </button>
73
+ <button class="wave-type-btn preset-btn bg-indigo-100 text-indigo-700 py-2 px-4 rounded-lg" data-type="sawtooth">
74
+ <i data-feather="triangle" class="mr-2"></i> Sawtooth
75
+ </button>
76
+ <button class="wave-type-btn preset-btn bg-indigo-100 text-indigo-700 py-2 px-4 rounded-lg" data-type="triangle">
77
+ <i data-feather="zap" class="mr-2"></i> Triangle
78
+ </button>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Binaural Beats Control -->
83
+ <div class="mb-8">
84
+ <div class="flex items-center mb-4">
85
+ <label class="inline-flex items-center">
86
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600" id="binauralToggle">
87
+ <span class="ml-2 text-gray-700 font-medium">Binaural Beats</span>
88
+ </label>
89
+ </div>
90
+ <div class="pl-6" id="binauralControls" style="display: none;">
91
+ <div class="mb-4">
92
+ <div class="flex justify-between items-center mb-2">
93
+ <label class="text-gray-700">Beat Frequency (Hz)</label>
94
+ <span class="frequency-display text-indigo-600 font-bold">10</span>
95
+ </div>
96
+ <input type="range" min="0.5" max="30" step="0.5" value="10" class="wave-control w-full" id="beatControl">
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Volume Control -->
102
+ <div class="mb-8">
103
+ <div class="flex justify-between items-center mb-2">
104
+ <label class="text-gray-700 font-medium">Volume</label>
105
+ <span id="volumeDisplay" class="text-indigo-600 font-bold">50%</span>
106
+ </div>
107
+ <input type="range" min="0" max="100" value="50" class="wave-control w-full" id="volumeControl">
108
+ </div>
109
+
110
+ <!-- Main Play/Pause Button -->
111
+ <button id="playBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center">
112
+ <i data-feather="play" class="mr-2"></i> Play Sound
113
+ </button>
114
+ </div>
115
+
116
+ <!-- Middle Panel - Presets -->
117
+ <div class="bg-white rounded-xl shadow-lg p-6">
118
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
119
+ <i data-feather="bookmark" class="mr-2"></i> Brainwave Presets
120
+ </h2>
121
+
122
+ <div class="space-y-4">
123
+ <button class="preset-btn w-full bg-indigo-50 hover:bg-indigo-100 text-indigo-700 py-3 px-4 rounded-lg transition duration-300 text-left flex items-center" data-preset="gamma">
124
+ <i data-feather="zap" class="mr-3 text-yellow-500"></i>
125
+ <div>
126
+ <h3 class="font-semibold">Gamma Waves (30-100 Hz)</h3>
127
+ <p class="text-sm text-gray-600">Heightened perception, problem solving</p>
128
+ </div>
129
+ </button>
130
+
131
+ <button class="preset-btn w-full bg-indigo-50 hover:bg-indigo-100 text-indigo-700 py-3 px-4 rounded-lg transition duration-300 text-left flex items-center" data-preset="beta">
132
+ <i data-feather="alert-circle" class="mr-3 text-blue-500"></i>
133
+ <div>
134
+ <h3 class="font-semibold">Beta Waves (12-30 Hz)</h3>
135
+ <p class="text-sm text-gray-600">Active thinking, focus, alertness</p>
136
+ </div>
137
+ </button>
138
+
139
+ <button class="preset-btn w-full bg-indigo-50 hover:bg-indigo-100 text-indigo-700 py-3 px-4 rounded-lg transition duration-300 text-left flex items-center" data-preset="alpha">
140
+ <i data-feather="eye" class="mr-3 text-green-500"></i>
141
+ <div>
142
+ <h3 class="font-semibold">Alpha Waves (8-12 Hz)</h3>
143
+ <p class="text-sm text-gray-600">Relaxation, creativity, flow states</p>
144
+ </div>
145
+ </button>
146
+
147
+ <button class="preset-btn w-full bg-indigo-50 hover:bg-indigo-100 text-indigo-700 py-3 px-4 rounded-lg transition duration-300 text-left flex items-center" data-preset="theta">
148
+ <i data-feather="moon" class="mr-3 text-purple-500"></i>
149
+ <div>
150
+ <h3 class="font-semibold">Theta Waves (4-8 Hz)</h3>
151
+ <p class="text-sm text-gray-600">Meditation, deep relaxation, intuition</p>
152
+ </div>
153
+ </button>
154
+
155
+ <button class="preset-btn w-full bg-indigo-50 hover:bg-indigo-100 text-indigo-700 py-3 px-4 rounded-lg transition duration-300 text-left flex items-center" data-preset="delta">
156
+ <i data-feather="cloud" class="mr-3 text-indigo-500"></i>
157
+ <div>
158
+ <h3 class="font-semibold">Delta Waves (0.5-4 Hz)</h3>
159
+ <p class="text-sm text-gray-600">Deep sleep, healing, regeneration</p>
160
+ </div>
161
+ </button>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Right Panel - Visualizer -->
166
+ <div class="bg-white rounded-xl shadow-lg p-6">
167
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
168
+ <i data-feather="bar-chart-2" class="mr-2"></i> Wave Visualizer
169
+ </h2>
170
+
171
+ <div class="bg-gray-50 rounded-lg h-64 mb-6 flex items-center justify-center">
172
+ <canvas id="waveCanvas" width="100%" height="100%"></canvas>
173
+ </div>
174
+
175
+ <div class="bg-gray-50 rounded-lg p-4">
176
+ <h3 class="font-semibold text-gray-800 mb-2">Current Settings</h3>
177
+ <div class="grid grid-cols-2 gap-4 text-sm">
178
+ <div>
179
+ <p class="text-gray-600">Wave Type:</p>
180
+ <p class="text-indigo-600 font-medium" id="currentWaveType">Sine</p>
181
+ </div>
182
+ <div>
183
+ <p class="text-gray-600">Base Frequency:</p>
184
+ <p class="text-indigo-600 font-medium" id="currentFrequency">440 Hz</p>
185
+ </div>
186
+ <div>
187
+ <p class="text-gray-600">Binaural Beats:</p>
188
+ <p class="text-indigo-600 font-medium" id="currentBinaural">Off</p>
189
+ </div>
190
+ <div>
191
+ <p class="text-gray-600">Beat Frequency:</p>
192
+ <p class="text-indigo-600 font-medium" id="currentBeat">0 Hz</p>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Footer -->
200
+ <footer class="mt-12 text-center text-gray-500 text-sm">
201
+ <p>Use headphones for best binaural beats experience. Not for medical use.</p>
202
+ <p class="mt-2">© 2023 SonicZen Wave Generator</p>
203
+ </footer>
204
+ </div>
205
+
206
+ <script>
207
+ // Initialize Tone.js
208
+ document.addEventListener('DOMContentLoaded', function() {
209
+ feather.replace();
210
+
211
+ // Audio setup
212
+ let oscillatorLeft = null;
213
+ let oscillatorRight = null;
214
+ let gainNode = null;
215
+ let isPlaying = false;
216
+
217
+ // Canvas setup
218
+ const canvas = document.getElementById('waveCanvas');
219
+ const ctx = canvas.getContext('2d');
220
+ canvas.width = canvas.offsetWidth;
221
+ canvas.height = canvas.offsetHeight;
222
+
223
+ // UI Elements
224
+ const playBtn = document.getElementById('playBtn');
225
+ const frequencyControl = document.getElementById('frequencyControl');
226
+ const volumeControl = document.getElementById('volumeControl');
227
+ const binauralToggle = document.getElementById('binauralToggle');
228
+ const binauralControls = document.getElementById('binauralControls');
229
+ const beatControl = document.getElementById('beatControl');
230
+ const waveTypeBtns = document.querySelectorAll('.wave-type-btn');
231
+ const presetBtns = document.querySelectorAll('.preset-btn[data-preset]');
232
+
233
+ // Display elements
234
+ const frequencyDisplay = document.querySelector('#frequencyControl + .frequency-display');
235
+ const beatDisplay = document.querySelector('#beatControl + .frequency-display');
236
+ const volumeDisplay = document.getElementById('volumeDisplay');
237
+ const currentWaveType = document.getElementById('currentWaveType');
238
+ const currentFrequency = document.getElementById('currentFrequency');
239
+ const currentBinaural = document.getElementById('currentBinaural');
240
+ const currentBeat = document.getElementById('currentBeat');
241
+
242
+ // Current settings
243
+ let currentWaveTypeValue = 'sine';
244
+ let currentFrequencyValue = 440;
245
+ let currentVolumeValue = 0.5;
246
+ let currentBeatValue = 10;
247
+ let currentBinauralState = false;
248
+
249
+ // Update displays
250
+ function updateDisplays() {
251
+ frequencyDisplay.textContent = currentFrequencyValue;
252
+ beatDisplay.textContent = currentBeatValue;
253
+ volumeDisplay.textContent = Math.round(currentVolumeValue * 100) + '%';
254
+
255
+ currentWaveType.textContent = currentWaveTypeValue.charAt(0).toUpperCase() + currentWaveTypeValue.slice(1);
256
+ currentFrequency.textContent = currentFrequencyValue + ' Hz';
257
+ currentBinaural.textContent = currentBinauralState ? 'On' : 'Off';
258
+ currentBeat.textContent = currentBinauralState ? currentBeatValue + ' Hz' : '0 Hz';
259
+
260
+ drawWave();
261
+ }
262
+
263
+ // Draw waveform visualization
264
+ function drawWave() {
265
+ const width = canvas.width;
266
+ const height = canvas.height;
267
+ ctx.clearRect(0, 0, width, height);
268
+
269
+ ctx.beginPath();
270
+ ctx.strokeStyle = '#4f46e5';
271
+ ctx.lineWidth = 2;
272
+
273
+ const centerY = height / 2;
274
+ const amplitude = height / 3;
275
+ const frequency = currentFrequencyValue / 50; // Scale for visualization
276
+
277
+ // If binaural beats are on, create a more complex visualization
278
+ if (currentBinauralState) {
279
+ ctx.strokeStyle = '#7c3aed';
280
+
281
+ for (let x = 0; x < width; x++) {
282
+ const progress = x / width * Math.PI * 10;
283
+ const leftWave = Math.sin(progress * frequency) * amplitude;
284
+ const rightWave = Math.sin(progress * (frequency + currentBeatValue/50)) * amplitude;
285
+ const y = centerY + (leftWave + rightWave) / 2;
286
+
287
+ if (x === 0) {
288
+ ctx.moveTo(x, y);
289
+ } else {
290
+ ctx.lineTo(x, y);
291
+ }
292
+ }
293
+ } else {
294
+ for (let x = 0; x < width; x++) {
295
+ const progress = x / width * Math.PI * 10;
296
+ const y = centerY + Math.sin(progress * frequency) * amplitude;
297
+
298
+ if (x === 0) {
299
+ ctx.moveTo(x, y);
300
+ } else {
301
+ ctx.lineTo(x, y);
302
+ }
303
+ }
304
+ }
305
+
306
+ ctx.stroke();
307
+ }
308
+
309
+ // Handle window resize
310
+ window.addEventListener('resize', function() {
311
+ canvas.width = canvas.offsetWidth;
312
+ canvas.height = canvas.offsetHeight;
313
+ drawWave();
314
+ });
315
+
316
+ // Initialize Tone.js when user interacts
317
+ function initAudio() {
318
+ if (Tone.context.state !== 'running') {
319
+ Tone.start();
320
+ }
321
+
322
+ // Create audio nodes
323
+ gainNode = new Tone.Gain(currentVolumeValue).toDestination();
324
+
325
+ if (currentBinauralState) {
326
+ oscillatorLeft = new Tone.Oscillator(currentFrequencyValue, currentWaveTypeValue).connect(gainNode);
327
+ oscillatorRight = new Tone.Oscillator(currentFrequencyValue + currentBeatValue, currentWaveTypeValue).connect(gainNode);
328
+ } else {
329
+ oscillatorLeft = new Tone.Oscillator(currentFrequencyValue, currentWaveTypeValue).connect(gainNode);
330
+ }
331
+ }
332
+
333
+ // Play/pause audio
334
+ function togglePlayback() {
335
+ if (!isPlaying) {
336
+ initAudio();
337
+
338
+ if (currentBinauralState) {
339
+ oscillatorLeft.start();
340
+ oscillatorRight.start();
341
+ } else {
342
+ oscillatorLeft.start();
343
+ }
344
+
345
+ playBtn.innerHTML = '<i data-feather="pause" class="mr-2"></i> Pause Sound';
346
+ playBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
347
+ playBtn.classList.add('bg-red-500', 'hover:bg-red-600');
348
+ isPlaying = true;
349
+ } else {
350
+ if (oscillatorLeft) oscillatorLeft.stop();
351
+ if (oscillatorRight) oscillatorRight.stop();
352
+
353
+ playBtn.innerHTML = '<i data-feather="play" class="mr-2"></i> Play Sound';
354
+ playBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
355
+ playBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
356
+ isPlaying = false;
357
+ }
358
+ feather.replace();
359
+ }
360
+
361
+ // Event listeners
362
+ playBtn.addEventListener('click', togglePlayback);
363
+
364
+ frequencyControl.addEventListener('input', function() {
365
+ currentFrequencyValue = parseInt(this.value);
366
+ if (oscillatorLeft) oscillatorLeft.frequency.value = currentFrequencyValue;
367
+ if (oscillatorRight) oscillatorRight.frequency.value = currentFrequencyValue + currentBeatValue;
368
+ updateDisplays();
369
+ });
370
+
371
+ volumeControl.addEventListener('input', function() {
372
+ currentVolumeValue = parseInt(this.value) / 100;
373
+ if (gainNode) gainNode.gain.value = currentVolumeValue;
374
+ updateDisplays();
375
+ });
376
+
377
+ binauralToggle.addEventListener('change', function() {
378
+ currentBinauralState = this.checked;
379
+ if (currentBinauralState) {
380
+ binauralControls.style.display = 'block';
381
+ } else {
382
+ binauralControls.style.display = 'none';
383
+ }
384
+
385
+ // Restart audio if playing
386
+ if (isPlaying) {
387
+ togglePlayback();
388
+ setTimeout(togglePlayback, 100);
389
+ }
390
+
391
+ updateDisplays();
392
+ });
393
+
394
+ beatControl.addEventListener('input', function() {
395
+ currentBeatValue = parseFloat(this.value);
396
+ if (oscillatorRight) oscillatorRight.frequency.value = currentFrequencyValue + currentBeatValue;
397
+ updateDisplays();
398
+ });
399
+
400
+ // Wave type buttons
401
+ waveTypeBtns.forEach(btn => {
402
+ btn.addEventListener('click', function() {
403
+ currentWaveTypeValue = this.dataset.type;
404
+
405
+ // Update active button styling
406
+ waveTypeBtns.forEach(b => b.classList.remove('bg-indigo-600', 'text-white'));
407
+ this.classList.add('bg-indigo-600', 'text-white');
408
+
409
+ if (oscillatorLeft) oscillatorLeft.type = currentWaveTypeValue;
410
+ if (oscillatorRight) oscillatorRight.type = currentWaveTypeValue;
411
+
412
+ // Restart audio if playing
413
+ if (isPlaying) {
414
+ togglePlayback();
415
+ setTimeout(togglePlayback, 100);
416
+ }
417
+
418
+ updateDisplays();
419
+ });
420
+ });
421
+
422
+ // Preset buttons
423
+ presetBtns.forEach(btn => {
424
+ btn.addEventListener('click', function() {
425
+ const preset = this.dataset.preset;
426
+
427
+ // Set frequencies based on preset
428
+ switch(preset) {
429
+ case 'gamma':
430
+ currentFrequencyValue = 40;
431
+ currentBeatValue = 5;
432
+ break;
433
+ case 'beta':
434
+ currentFrequencyValue = 20;
435
+ currentBeatValue = 4;
436
+ break;
437
+ case 'alpha':
438
+ currentFrequencyValue = 10;
439
+ currentBeatValue = 3;
440
+ break;
441
+ case 'theta':
442
+ currentFrequencyValue = 6;
443
+ currentBeatValue = 2;
444
+ break;
445
+ case 'delta':
446
+ currentFrequencyValue = 2;
447
+ currentBeatValue = 1.5;
448
+ break;
449
+ }
450
+
451
+ // Enable binaural beats if not already
452
+ if (!currentBinauralState) {
453
+ binauralToggle.checked = true;
454
+ currentBinauralState = true;
455
+ binauralControls.style.display = 'block';
456
+ }
457
+
458
+ // Update UI controls
459
+ frequencyControl.value = currentFrequencyValue;
460
+ beatControl.value = currentBeatValue;
461
+
462
+ // Restart audio if playing
463
+ if (isPlaying) {
464
+ togglePlayback();
465
+ setTimeout(togglePlayback, 100);
466
+ } else {
467
+ updateDisplays();
468
+ }
469
+ });
470
+ });
471
+
472
+ // Initial display update
473
+ updateDisplays();
474
+ });
475
+ </script>
476
+ </body>
477
  </html>