Lub Dub Valves Today
button background: #2c3e4e; border: none; font-size: 1.2rem; font-weight: bold; padding: 0.8rem 1.6rem; border-radius: 60px; color: white; cursor: pointer; transition: 0.1s linear; box-shadow: 0 4px 8px black; font-family: monospace;
function playDub() if (audioCtx.state === 'suspended') audioCtx.resume(); const now = audioCtx.currentTime; const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.connect(gain); gain.connect(audioCtx.destination); osc.frequency.value = 210; // sharper gain.gain.value = 0.4; gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.22); osc.start(); osc.stop(now + 0.22); // short high ping const osc2 = audioCtx.createOscillator(); const gain2 = audioCtx.createGain(); osc2.connect(gain2); gain2.connect(audioCtx.destination); osc2.frequency.value = 430; gain2.gain.value = 0.12; gain2.gain.exponentialRampToValueAtTime(0.0001, now + 0.16); osc2.start(); osc2.stop(now + 0.16);
.button-group display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 2rem; lub dub valves
footer text-align: center; font-size: 0.7rem; margin-top: 1.5rem; opacity: 0.7; </style> </head> <body> <div class="card"> <h1>❤️ LUB DUB VALVES</h1> <div class="sub">atrioventricular → lub | semilunar → dub</div>
button:active transform: scale(0.96);
.lub .valve-title color: #ff9f7c; .dub .valve-title color: #7cd4ff;
.lub-btn background: #c2571a; border-bottom: 3px solid #ffaa70; .dub-btn background: #1a6c9e; border-bottom: 3px solid #70c8ff; .auto-btn background: #2b5e3b; border-bottom: 3px solid #8bc34a; button background: #2c3e4e; border: none; font-size: 1
<script> // ----- Web Audio Setup ----- const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
