Skip to content

Instantly share code, notes, and snippets.

@Bob-Wright-the-reactor

Bob-Wright-the-reactor/14-chakra-sounds.markdown

Created February 2, 2026 00:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Bob-Wright-the-reactor/789c7143451a35e8194888467f8a6fa6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Bob-Wright-the-reactor/789c7143451a35e8194888467f8a6fa6 to your computer and use it in GitHub Desktop.
Download ZIP
14 Chakra Sounds
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14-Chakra Matrix: Frequency Blueprint & Recorder</title>
<style>
body { font-family: 'Segoe UI', Arial, sans-serif; line-height: 1.6; color: #e0e0e0; max-width: 1000px; margin: 0 auto; padding: 20px; background-color: #0b0e14; }
header { text-align: center; border-bottom: 1px solid #2d333b; padding-bottom: 20px; margin-bottom: 20px; }
h1 { color: #58a6ff; margin: 0; font-size: 1.8em; text-transform: uppercase; letter-spacing: 2px; }
.visualizer-container { background: #000; border: 2px solid #30363d; border-radius: 12px; position: sticky; top: 10px; z-index: 100; overflow: hidden; box-shadow: 0 0 20px rgba(0, 255, 255, 0.1); margin-bottom: 30px; }
canvas { width: 100%; height: 150px; display: block; }
.controls-bar { background: #161b22; padding: 15px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #30363d; flex-wrap: wrap; gap: 10px; }
.master-vol { width: 120px; cursor: pointer; }
.btn-stop { background: #f85149; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; }
.btn-record { background: #238636; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; }
.btn-record.recording { background: #da3633; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
.grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
table { width: 100%; border-collapse: collapse; background: #161b22; border-radius: 8px; overflow: hidden; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #30363d; }
th { background: #0d1117; color: #8b949e; font-size: 0.8em; }
.play-btn { background: #238636; color: white; border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer; transition: all 0.2s; min-width: 70px; }
.play-btn:hover { background: #2ea043; transform: scale(1.05); }
.play-btn.active { background: #f1c40f; color: #000; box-shadow: 0 0 10px #f1c40f; }
.minor-grid { grid-column: span 2; background: #161b22; padding: 20px; border-radius: 8px; display: flex; justify-content: space-around; flex-wrap: wrap; text-align: center; }
#timer { font-family: monospace; color: #f1c40f; font-weight: bold; margin-left: 10px; visibility: hidden; }
</style>
</head>
<body>
<header>
<h1>The 14-Chakra Matrix</h1>
<p style="color: #8b949e;">Technical Frequency Map & Recording Terminal</p>
</header>
<div class="visualizer-container">
<canvas id="canvas"></canvas>
<div class="controls-bar">
<div>
<span style="font-size: 0.7em; color: #8b949e;">AMPLITUDE</span><br>
<input type="range" id="volume" class="master-vol" min="0" max="0.3" step="0.01" value="0.05">
</div>
<div>
<button id="recordBtn" class="btn-record" onclick="toggleRecording()">START RECORDING</button>
<span id="timer">00:00</span>
</div>
<button class="btn-stop" onclick="stopAll()">KILL ALL SIGNALS</button>
</div>
</div>
<div class="grid-container">
<section>
<h3 style="color:#58a6ff">INTERNAL 9 (Body)</h3>
<table>
<thead><tr><th>CHAKRA</th><th>HZ</th><th>SYNC</th></tr></thead>
<tbody id="internal-rows"></tbody>
</table>
</section>
<section>
<h3 style="color:#bc8cff">EXTERNAL 5 (Above)</h3>
<table>
<thead><tr><th>CHAKRA</th><th>HZ</th><th>SYNC</th></tr></thead>
<tbody id="external-rows"></tbody>
</table>
</section>
<section class="minor-grid" id="minor-rows"></section>
</div>
<script>
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
const dest = audioCtx.createMediaStreamDestination();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
let activeOscs = {};
let mediaRecorder;
let chunks = [];
let startTime;
let timerInterval;
function toggleFreq(freq, name, elId) {
if (audioCtx.state === 'suspended') audioCtx.resume();
if (activeOscs[freq]) {
activeOscs[freq].osc.stop();
activeOscs[freq].gain.disconnect();
delete activeOscs[freq];
document.getElementById(elId).innerText = "PLAY";
document.getElementById(elId).classList.remove('active');
} else {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = 'sine';
osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
gain.gain.setValueAtTime(document.getElementById('volume').value, audioCtx.currentTime);
osc.connect(gain);
gain.connect(analyser);
gain.connect(dest); // Connect to recorder destination
analyser.connect(audioCtx.destination);
osc.start();
activeOscs[freq] = {osc, gain};
document.getElementById(elId).innerText = "STOP";
document.getElementById(elId).classList.add('active');
}
}
function toggleRecording() {
const btn = document.getElementById('recordBtn');
const timerEl = document.getElementById('timer');
if (!mediaRecorder || mediaRecorder.state === 'inactive') {
chunks = [];
mediaRecorder = new MediaRecorder(dest.stream);
mediaRecorder.ondataavailable = e => chunks.push(e.data);
mediaRecorder.onstop = () => {
const blob = new Blob(chunks, { type: 'audio/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'Chakra_Frequency_Session.webm';
a.click();
};
mediaRecorder.start();
btn.innerText = "STOP & SAVE";
btn.classList.add('recording');
timerEl.style.visibility = 'visible';
startTime = Date.now();
timerInterval = setInterval(updateTimer, 1000);
} else {
mediaRecorder.stop();
btn.innerText = "START RECORDING";
btn.classList.remove('recording');
clearInterval(timerInterval);
timerEl.style.visibility = 'hidden';
}
}
function updateTimer() {
const diff = Math.floor((Date.now() - startTime) / 1000);
const m = Math.floor(diff / 60).toString().padStart(2, '0');
const s = (diff % 60).toString().padStart(2, '0');
document.getElementById('timer').innerText = `${m}:${s}`;
}
function stopAll() {
Object.keys(activeOscs).forEach(f => activeOscs[f].osc.stop());
activeOscs = {};
document.querySelectorAll('.play-btn').forEach(b => {
b.innerText = "PLAY";
b.classList.remove('active');
});
}
// Visualizer Code
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function draw() {
requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
ctx.fillStyle = '#0b0e14';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = '#1b2129';
for(let i=0; i<canvas.width; i+=40) { ctx.beginPath(); ctx.moveTo(i,0); ctx.lineTo(i,canvas.height); ctx.stroke(); }
ctx.lineWidth = 3;
const grad = ctx.createLinearGradient(0, 0, canvas.width, 0);
grad.addColorStop(0, '#58a6ff'); grad.addColorStop(1, '#bc8cff');
ctx.strokeStyle = grad;
ctx.beginPath();
let x = 0;
let slice = canvas.width / bufferLength;
for (let i = 0; i < bufferLength; i++) {
let y = (dataArray[i] / 128.0) * canvas.height / 2;
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
x += slice;
}
ctx.stroke();
}
draw();
// Population
const internal = [{n:"Root", f:285}, {n:"Sacral", f:396}, {n:"Gut", f:452}, {n:"Heart", f:507}, {n:"Solar Plexus", f:618}, {n:"Throat", f:729}, {n:"Third Eye", f:840}, {n:"Pineal", f:896}, {n:"Crown", f:951}];
const external = [{n:"Earth Star", f:1062}, {n:"Soul Star", f:1173}, {n:"Stellar Gateway", f:1284}, {n:"Universal Gateway", f:1395}, {n:"Divine Gateway", f:1506}];
const minor = [{n:"Sciatic", f:174}, {n:"Hands", f:63}, {n:"Feet", f:63}];
const fill = (data, id) => {
const target = document.getElementById(id);
data.forEach((item, i) => {
const btnId = `btn-${item.f}-${id}-${i}`;
if(id === 'minor-rows') {
target.innerHTML += `<div style="margin:10px"><span>${item.n}</span><br><strong>${item.f}Hz</strong><br><button id="${btnId}" class="play-btn" onclick="toggleFreq(${item.f},'${item.n}','${btnId}')">PLAY</button></div>`;
} else {
target.innerHTML += `<tr><td>${item.n}</td><td>${item.f}</td><td><button id="${btnId}" class="play-btn" onclick="toggleFreq(${item.f},'${item.n}','${btnId}')">PLAY</button></td></tr>`;
}
});
}
fill(internal, 'internal-rows'); fill(external, 'external-rows'); fill(minor, 'minor-rows');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment