dijital dahi: Mekanik Klavye Switch Tıklama Efekti (Apple Haptic Click)

⌨️ MEKANİK KLAVYE SWITCH TIKLAMA

SPACE

Mekanik Switch Geri Bildirimi

Her tıklamada gecikmesiz haptik ses dalgası üretir.

📖 Ses Efekti Analizi ve Kullanım Rehberi

Açıklama: Butonlara tıklandığında kullanıcılara gerçek bir mekanik Blue/Brown switch veya Apple haptik dokunma hissi veren çıtır tıklama sesi.

Sentezleyici Motoru: Saf Vanilla JavaScript (Web Audio API).
Dalga Türü: triangle (Sıfır harici dosya yükü, 0 KB).
Frekans Aralığı: 1200 Hz ➔ 400 Hz
Ses Süresi: 0.05 saniye (Ultra hafif & 0 Gecikme).

📦 HTML KODU

<div class="dd-sound-card-demo">
  <div class="dd-switch-box">
    <div class="keycap">SPACE</div>
  </div>
  <div class="dd-sound-meta">
    <h4>Mekanik Switch Geri Bildirimi</h4>
    <p>Her tıklamada gecikmesiz haptik ses dalgası üretir.</p>
  </div>
  <button class="dd-sound-play-btn cyan" onclick="playMechanicalClickSound()">
    <span class="btn-icon">⚡</span> Tuşa Bas & Dinle
  </button>
</div>

🎨 CSS STILLERI

.dd-sound-card-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: #0f172a;
  border: 1px solid #38bdf8;
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.15);
}
.keycap {
  background: #1e293b;
  border: 2px solid #475569;
  border-bottom: 5px solid #0f172a;
  color: #38bdf8;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  font-family: monospace;
}
.dd-sound-play-btn.cyan {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.35);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dd-sound-play-btn.cyan:hover {
  transform: translateY(-2px);
}

⚡ JAVASCRIPT (WEB AUDIO API)

window.playMechanicalClickSound = function() {
  const AudioCtx = window.AudioContext || window.webkitAudioContext;
  if (!AudioCtx) return;
  const ctx = new AudioCtx();
  
  const osc = ctx.createOscillator();
  const gain = ctx.createGain();
  
  osc.type = 'triangle';
  osc.frequency.setValueAtTime(1400, ctx.currentTime);
  osc.frequency.exponentialRampToValueAtTime(300, ctx.currentTime + 0.04);
  
  gain.gain.setValueAtTime(0.3, ctx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.04);
  
  osc.connect(gain);
  gain.connect(ctx.destination);
  
  osc.start(ctx.currentTime);
  osc.stop(ctx.currentTime + 0.05);
};

✨ YAPAY ZEKA (AI) PROMPTU

Web Audio API kullanarak web arayüzlerindeki butonlara basıldığında gerçekçi bir mekanik klavye (Tactile switch) tıklama hissi veren ultra kısa (40ms) saf JavaScript ses sentezleyici fonksiyonu yaz.

✓ Kopyalandı!

\n\n'; const blob = new Blob([fullDoc], { type: 'text/html;charset=utf-8;' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; a.click(); URL.revokeObjectURL(url); } function toggleStudioFavorite(id) { showToast('⭐ Favorilere eklendi!'); } function resetAllCode() { location.reload(); } // İlk Yüklemede Çalıştır document.addEventListener('DOMContentLoaded', () => { runSandboxLive(); });

Mekanik Klavye Switch Tıklama Efekti (Apple Haptic Click)

Mekanik Switch Geri Bildirimi

Kayıtlı Favorilerim