<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Binaural Beat Generator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(45deg, #1a1a1a, #2d2d2d);
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
}
.container {
max-width: 800px;
width: 100%;
background: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
h1 {
text-align: center;
margin-bottom: 2rem;
color: #00ff88;
text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}
.controls {
display: grid;
gap: 1.5rem;
margin-bottom: 2rem;
}
.control-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
label {
font-size: 1.1rem;
color: #00ff88;
}
input[type="range"] {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
outline: none;
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #00ff88;
border-radius: 50%;
cursor: pointer;
transition: background 0.3s;
}
.value-display {
font-size: 1.2rem;
color: #fff;
text-align: center;
}
.buttons {
display: flex;
gap: 1rem;
justify-content: center;
}
button {
padding: 1rem 2rem;
font-size: 1.1rem;
border: none;
border-radius: 5px;
background: #00ff88;
color: #1a1a1a;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background: #00cc6a;
transform: translateY(-2px);
}
.display {
margin-top: 2rem;
padding: 1rem;
background: rgba(0, 255, 136, 0.1);
border-radius: 10px;
text-align: center;
}
#currentFrequencies {
font-size: 1.5rem;
color: #00ff88;
margin: 1rem 0;
line-height: 1.6;
}
.wave-visualizer {
width: 100%;
height: 100px;
background: rgba(255, 255, 255, 0.05);
margin-top: 2rem;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.wave {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(180deg, transparent 0%, #00ff88 50%, transparent 100%);
opacity: 0.3;
animation: wave 2s infinite linear;
}
@keyframes wave {
0% { transform: translateX(-100%) scaleY(0.5); }
50% { transform: translateX(0%) scaleY(1); }
100% { transform: translateX(100%) scaleY(0.5); }
}
</style>
</head>
<body>
<div class="container">
<h1>Random Binaural Beat Generator</h1>
<div class="controls">
<div class="control-group">
<label for="beatFrequency">Target Beat Frequency (Hz)</label>
<input type="range" id="beatFrequency" min="1" max="40" value="7.83">
<div class="value-display" id="beatFrequencyValue">7.83 Hz</div>
</div>
<div class="control-group">
<label for="interval">Interval Between Changes (ms)</label>
<input type="range" id="interval" min="100" max="2000" value="500">
<div class="value-display" id="intervalValue">500 ms</div>
</div>
<div class="control-group">
<label for="volume">Volume</label>
<input type="range" id="volume" min="0" max="1" step="0.1" value="0.5">
<div class="value-display" id="volumeValue">50%</div>
</div>
</div>
<div class="buttons">
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
</div>
<div class="display">
<p>Current Frequencies:</p>
<div id="currentFrequencies">
Left: 0 Hz<br>
Right: 0 Hz<br>
Beat: 0 Hz
</div>
</div>
<div class="wave-visualizer">
<div class="wave"></div>
</div>
</div>
<script>
let audioContext;
let oscillatorLeft;
let oscillatorRight;
let gainNode;
let isPlaying = false;
let intervalId;
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const beatFrequencySlider = document.getElementById('beatFrequency');
const intervalSlider = document.getElementById('interval');
const volumeSlider = document.getElementById('volume');
const currentFrequenciesDisplay = document.getElementById('currentFrequencies');
function updateValueDisplays() {
document.getElementById('beatFrequencyValue').textContent = `${beatFrequencySlider.value} Hz`;
document.getElementById('intervalValue').textContent = `${intervalSlider.value} ms`;
document.getElementById('volumeValue').textContent = `${Math.round(volumeSlider.value * 100)}%`;
}
function getRandomBaseFrequency() {
// Random frequency between 100 and 400 Hz
return Math.random() * 300 + 100;
}
function initAudio() {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
gainNode = audioContext.createGain();
gainNode.connect(audioContext.destination);
oscillatorLeft = audioContext.createOscillator();
oscillatorRight = audioContext.createOscillator();
const merger = audioContext.createChannelMerger(2);
oscillatorLeft.connect(merger, 0, 0);
oscillatorRight.connect(merger, 0, 1);
merger.connect(gainNode);
updateFrequencies();
updateVolume();
}
function updateFrequencies() {
const beatFreq = parseFloat(beatFrequencySlider.value);
const baseFreq = getRandomBaseFrequency();
// Ensure both frequencies create the desired beat frequency
const leftFreq = baseFreq;
const rightFreq = baseFreq + beatFreq;
oscillatorLeft.frequency.setValueAtTime(leftFreq, audioContext.currentTime);
oscillatorRight.frequency.setValueAtTime(rightFreq, audioContext.currentTime);
currentFrequenciesDisplay.innerHTML = `
Left: ${leftFreq.toFixed(2)} Hz<br>
Right: ${rightFreq.toFixed(2)} Hz<br>
Beat: ${beatFreq.toFixed(2)} Hz
`;
}
function updateVolume() {
gainNode.gain.setValueAtTime(volumeSlider.value, audioContext.currentTime);
}
function startRandomization() {
intervalId = setInterval(() => {
updateFrequencies();
}, parseFloat(intervalSlider.value));
}
startBtn.addEventListener('click', () => {
if (!isPlaying) {
initAudio();
oscillatorLeft.start();
oscillatorRight.start();
startRandomization();
isPlaying = true;
}
});
stopBtn.addEventListener('click', () => {
if (isPlaying) {
clearInterval(intervalId);
oscillatorLeft.stop();
oscillatorRight.stop();
audioContext.close();
isPlaying = false;
currentFrequenciesDisplay.innerHTML = `
Left: 0 Hz<br>
Right: 0 Hz<br>
Beat: 0 Hz
`;
}
});
beatFrequencySlider.addEventListener('input', () => {
updateValueDisplays();
if (isPlaying) updateFrequencies();
});
intervalSlider.addEventListener('input', () => {
updateValueDisplays();
if (isPlaying) {
clearInterval(intervalId);
startRandomization();
}
});
volumeSlider.addEventListener('input', () => {
updateValueDisplays();
if (isPlaying) updateVolume();
});
updateValueDisplays();
</script>
</body>
</html>