dijital dahi: piyano

CANLI ENSTRÜMAN v1.0

🎹 Bileşen Analizi & Kullanım Alanları

Bu Vanilla Synth, harici kütüphane bağımlılığı olmaksızın Web Audio API üzerine kurulu çok sesli (polyphonic) bir yazılım sentezleyicisidir. Osilatör, filtre, ADSR zarfı ve dinamik sıkıştırıcı zinciri saf JavaScript ile yönetilir.

🚀 Nerelerde Kullanılır?

Müzik Eğitimi: Nota öğretimi, aralık tanıma ve kulak eğitimi uygulamalarında interaktif klavye olarak kullanılabilir.
Web Tabanlı DAW: Tarayıcı üstü beat-maker veya loop-station prototipleri için ses motoru altyapısı olarak görev yapar.
Erişilebilirlik Araçları: Fiziksel klavye kısayolları sayesinde motor engelli kullanıcılar için alternatif giriş cihazı olarak uyarlanabilir.

🎨 Özelleştirme İpuçları:

Oktav Aralığı: OCTAVE_RANGE = [4, 5] sabitini değiştirerek klavye aralığını genişletebilirsiniz.
Zarf Süreleri: pressNote içindeki exponentialRampToValueAtTime değerleriyle atak/çürüme eğrisini özelleştirebilirsiniz.
Filtre Karakteri: BiquadFilter tipini lowpass'tan bandpass'a çevirerek tamamen farklı bir tını elde edebilirsiniz.

🌐 HTML KODU ✏️ Düzenlenebilir

<div class="synth-app">
  <header class="synth-brand">
    <span class="synth-dot"></span>
    <span>Vanilla Synth</span>
  </header>

<section class="synth-panel" aria-label="Sentez ayarları">
    <div class="synth-group">
      <span class="synth-label">Dalga</span>
      <div class="synth-segmented" id="waveformSeg">
        <button type="button" data-wave="sine" class="active">Sinüs</button>
        <button type="button" data-wave="triangle">Üçgen</button>
        <button type="button" data-wave="sawtooth">Testere</button>
        <button type="button" data-wave="square">Kare</button>
      </div>
    </div>
    <div class="synth-group">
      <label class="synth-label" for="volume">Hacim</label>
      <input type="range" id="volume" min="0" max="1" step="0.01" value="0.35" />
      <span class="synth-value" id="volumeVal">35%</span>
    </div>
    <div class="synth-group">
      <label class="synth-label" for="octave">Oktav</label>
      <input type="range" id="octave" min="-2" max="2" step="1" value="0" />
      <span class="synth-value" id="octaveVal">0</span>
    </div>
  </section>

<section class="synth-panel" aria-label="Kayıt kontrolleri">
    <button type="button" id="btnRecord" class="synth-btn synth-btn-rec">
      <span class="synth-led"></span>
      <span class="btn-text">Kayıt</span>
    </button>
    <button type="button" id="btnPlay" class="synth-btn">▶ Çal</button>
    <button type="button" id="btnStop" class="synth-btn">■ Durdur</button>
    <button type="button" id="btnClear" class="synth-btn">Temizle</button>
    <button type="button" id="btnSave" class="synth-btn synth-btn-primary">Kaydet</button>
    <span class="synth-status" id="status">Hazır</span>
    <span class="synth-timer" id="timer">00:00.0</span>
  </section>

<section class="synth-panel synth-library" aria-label="Kayıtlı çalışmalar">
    <div class="synth-library-head">
      <span class="synth-label">Kayıtlı Çalışmalar</span>
      <span class="synth-count" id="savedCount">0</span>
    </div>
    <ul class="synth-saved-list" id="savedList"></ul>
  </section>
</div>

🎨 CSS KODU ✏️ Düzenlenebilir

.synth-app { display:flex; flex-direction:column; gap:10px; width:100%; padding:4px; }
.synth-brand { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#d6dee8; padding:0 4px; }
.synth-dot { width:9px; height:9px; border-radius:50%; background:#22d3ee; box-shadow:0 0 14px #22d3ee, 0 0 3px #fff; animation:synthBreathe 3.2s ease-in-out infinite; }
@keyframes synthBreathe { 0%,100%{opacity:1;} 50%{opacity:.45;} }

.synth-panel { background:linear-gradient(180deg,#141c26 0%,#0d131b 100%); border:1px solid #24303f; border-radius:12px; padding:10px 12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.synth-group { display:flex; align-items:center; gap:8px; }
.synth-label { font-size:10px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:#55637a; white-space:nowrap; }
.synth-value { font-family:monospace; font-size:11px; color:#22d3ee; min-width:38px; text-align:right; font-variant-numeric:tabular-nums; }

.synth-segmented { display:flex; gap:2px; padding:2px; background:#070a0f; border:1px solid #24303f; border-radius:8px; }
.synth-segmented button { font:inherit; font-size:10.5px; font-weight:500; color:#7d8b9c; background:transparent; border:none; padding:4px 9px; border-radius:6px; cursor:pointer; transition:all .16s; }
.synth-segmented button:hover { color:#d6dee8; }
.synth-segmented button.active { color:#22d3ee; background:linear-gradient(180deg,rgba(34,211,238,.22),rgba(34,211,238,.07)); box-shadow:inset 0 0 0 1px rgba(34,211,238,.4); }

input[type=range] { -webkit-appearance:none; appearance:none; width:110px; height:4px; border-radius:999px; background:#1c2632; outline:none; cursor:pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:#22d3ee; border:2px solid #0d131b; box-shadow:0 0 10px rgba(34,211,238,.5); cursor:pointer; }
input[type=range]::-moz-range-thumb { width:11px; height:11px; border-radius:50%; background:#22d3ee; border:2px solid #0d131b; cursor:pointer; }

.synth-btn { font:inherit; font-size:11.5px; font-weight:500; color:#d6dee8; background:linear-gradient(180deg,#1c2632,#141c26); border:1px solid #24303f; border-radius:8px; padding:6px 11px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .16s; }
.synth-btn:hover:not(:disabled) { border-color:#3a4a5e; }
.synth-btn:disabled { opacity:.35; cursor:not-allowed; }
.synth-btn-primary { color:#7ff0ff; background:linear-gradient(180deg,rgba(34,211,238,.22),rgba(34,211,238,.07)); border-color:rgba(34,211,238,.45); }
.synth-btn-primary:hover:not(:disabled) { border-color:rgba(34,211,238,.8); box-shadow:0 0 16px -4px rgba(34,211,238,.4); }
.synth-btn-rec .synth-led { width:8px; height:8px; border-radius:50%; background:#4b5a70; transition:all .18s; }
.synth-btn-rec.recording { color:#fda4af; border-color:rgba(244,63,94,.6); background:linear-gradient(180deg,rgba(244,63,94,.16),rgba(244,63,94,.05)); }
.synth-btn-rec.recording .synth-led { background:#f43f5e; box-shadow:0 0 12px #f43f5e; animation:synthPulse 1.05s ease-in-out infinite; }
@keyframes synthPulse { 0%,100%{opacity:1;} 50%{opacity:.28;} }

.synth-status { font-size:11px; color:#7d8b9c; padding-left:2px; }
.synth-timer { margin-left:auto; font-family:monospace; font-size:12.5px; font-variant-numeric:tabular-nums; color:#d6dee8; padding:4px 10px; border-radius:7px; background:#070a0f; border:1px solid #24303f; }

.synth-scope { display:block; width:100%; height:70px; border-radius:12px; border:1px solid #24303f; background:linear-gradient(180deg,#080c12,#0b1018); box-shadow:inset 0 0 40px -12px rgba(34,211,238,.15); }

.synth-piano { position:relative; width:100%; height:170px; background:#0d131b; border:1px solid #24303f; border-radius:12px; box-shadow:0 34px 70px -26px rgba(0,0,0,.95); overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:none; }
.keys-white { display:flex; height:100%; width:100%; }
.keys-black { position:absolute; inset:0; pointer-events:none; }
.key-white { flex:1 1 0; min-width:0; position:relative; background:linear-gradient(180deg,#f8fafc,#e2e8f0 62%,#cbd5e1); box-shadow:inset -1px 0 0 rgba(15,23,42,.22); border-radius:0 0 6px 6px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:9px; cursor:pointer; transition:background .05s linear,box-shadow .12s; }
.key-white .key-hint { font-family:monospace; font-size:9.5px; font-weight:600; color:#64748b; pointer-events:none; }
.key-white.active { background:linear-gradient(180deg,#cffafe,#67e8f9 55%,#22d3ee); box-shadow:inset -1px 0 0 rgba(15,23,42,.22),0 0 26px -2px rgba(34,211,238,.75); }
.key-white.active .key-hint { color:#0e7490; }
.key-black { position:absolute; top:0; height:62%; background:linear-gradient(180deg,#2b3543,#131a23 55%,#05080c); border-radius:0 0 5px 5px; box-shadow:0 5px 10px rgba(0,0,0,.72),inset 0 -2px 0 rgba(255,255,255,.07); pointer-events:auto; cursor:pointer; z-index:2; display:flex; align-items:flex-end; justify-content:center; padding-bottom:7px; transition:background .05s linear,box-shadow .12s; }
.key-black .key-hint { font-family:monospace; font-size:8.5px; font-weight:600; color:#64748b; pointer-events:none; }
.key-black.active { background:linear-gradient(180deg,#7dd3fc,#38bdf8 50%,#0ea5e9); box-shadow:0 0 22px -2px rgba(56,189,248,.85); }
.key-black.active .key-hint { color:#075985; }

.synth-library { flex-direction:column; align-items:stretch; gap:8px; }
.synth-library-head { display:flex; align-items:center; justify-content:space-between; }
.synth-count { font-family:monospace; font-size:10.5px; color:#22d3ee; padding:2px 8px; border-radius:999px; background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.28); }
.synth-saved-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:160px; overflow-y:auto; }
.synth-saved-list .empty { font-size:11.5px; color:#55637a; text-align:center; padding:12px 8px; border:1px dashed #24303f; border-radius:8px; }
.synth-saved-item { display:flex; align-items:center; gap:8px; padding:7px 9px; background:#070a0f; border:1px solid #24303f; border-radius:8px; }
.synth-saved-info { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.synth-saved-name { font-size:11.5px; font-weight:600; color:#d6dee8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.synth-saved-meta { font-family:monospace; font-size:9.5px; color:#55637a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.synth-saved-actions { display:flex; gap:5px; flex:0 0 auto; }
.synth-saved-actions .synth-btn { font-size:10px; padding:4px 8px; }
.synth-saved-actions .synth-btn:hover { border-color:rgba(244,63,94,.6); color:#fda4af; }

@media (max-width:820px) {
  .synth-piano { height:130px; }
  .key-white .key-hint { display:none; }
}

⚡ JAVASCRIPT KODU ✏️ Düzenlenebilir

(function(){
  "use strict";

const root = document.querySelector("#live-sandbox-container") || document;
  const $ = (id) => root.querySelector("#" + id) || document.getElementById(id);

const whiteLayer = $("whiteLayer"), blackLayer = $("blackLayer");
  const waveformSeg = $("waveformSeg"), volumeInput = $("volume"), volumeVal = $("volumeVal");
  const octaveInput = $("octave"), octaveVal = $("octaveVal");
  const btnRecord = $("btnRecord"), btnPlay = $("btnPlay"), btnStop = $("btnStop");
  const btnClear = $("btnClear"), btnSave = $("btnSave");
  const statusEl = $("status"), timerEl = $("timer");
  const savedListEl = $("savedList"), savedCountEl = $("savedCount");
  const scopeCanvas = $("scope");
  if (!scopeCanvas) return;
  const scopeCtx = scopeCanvas.getContext("2d");

let audioCtx=null, masterGain=null, compressor=null, analyser=null, scopeBuffer=null;
  const activeVoices = new Map();
  const keyElements = new Map();
  const heldPhysicalKeys = new Set();
  let currentWave="sine", octaveShift=0;

const recorder = { isRecording:false, startTime:0, events:[], pending:new Map() };
  let playbackTimers=[], isPlaying=false, timerInterval=null;
  let savedRecordings=[];

function ensureAudio(){
    if (audioCtx){ if (audioCtx.state==="suspended") audioCtx.resume(); return; }
    const Ctor = window.AudioContext || window.webkitAudioContext;
    audioCtx = new Ctor();
    compressor = audioCtx.createDynamicsCompressor();
    compressor.threshold.setValueAtTime(-18, audioCtx.currentTime);
    compressor.knee.setValueAtTime(24, audioCtx.currentTime);
    compressor.ratio.setValueAtTime(8, audioCtx.currentTime);
    masterGain = audioCtx.createGain();
    masterGain.gain.setValueAtTime(parseFloat(volumeInput.value), audioCtx.currentTime);
    analyser = audioCtx.createAnalyser();
    analyser.fftSize = 2048;
    scopeBuffer = new Uint8Array(analyser.fftSize);
    masterGain.connect(compressor); compressor.connect(analyser); analyser.connect(audioCtx.destination);
  }

function noteToFrequency(note){
    const m = /^([A-G]#?)(-?\d)$/.exec(note);
    const midi = (parseInt(m[2],10)+1)*12 + SEMITONE_INDEX[m[1]];
    return 440 * Math.pow(2,(midi-69)/12);
  }

function pressNote(note){
    if (activeVoices.has(note)) return;
    ensureAudio();
    const now = audioCtx.currentTime;
    const baseFreq = noteToFrequency(note) * Math.pow(2, octaveShift);
    const osc1 = audioCtx.createOscillator(); osc1.type=currentWave; osc1.frequency.setValueAtTime(baseFreq, now);
    const osc2 = audioCtx.createOscillator(); osc2.type=currentWave; osc2.frequency.setValueAtTime(baseFreq, now); osc2.detune.setValueAtTime(7, now);
    const filter = audioCtx.createBiquadFilter(); filter.type="lowpass";
    filter.frequency.setValueAtTime(Math.min(14000, baseFreq*9+2200), now);
    const env = audioCtx.createGain();
    env.gain.setValueAtTime(0.0001, now);
    env.gain.exponentialRampToValueAtTime(1.0, now+0.012);
    env.gain.exponentialRampToValueAtTime(0.55, now+0.15);
    osc1.connect(filter); osc2.connect(filter); filter.connect(env); env.connect(masterGain);
    osc1.start(now); osc2.start(now);
    activeVoices.set(note,{osc1,osc2,envelope:env});
    setKeyVisual(note,true);
    if (recorder.isRecording) recorder.pending.set(note, performance.now()-recorder.startTime);
  }

function releaseAllNotes(){ Array.from(activeVoices.keys()).forEach(releaseNote); }

function physicalKeyFor(note){
    for (const [k,v] of Object.entries(KEYBOARD_MAP)) if (v===note) return k.toUpperCase();
    return null;
  }

function setKeyVisual(note,on){ const el=keyElements.get(note); if(el) el.classList.toggle("active",on); }

function stopPlayback(){
    playbackTimers.forEach(clearTimeout); playbackTimers=[]; stopTimerLoop();
    if(isPlaying){ releaseAllNotes(); isPlaying=false; setStatus("Durduruldu","warn"); }
    updateControlStates();
  }

function updateControlStates(){
    const has = recorder.events.length>0;
    if(btnRecord) btnRecord.disabled=isPlaying;
    if(btnPlay)   btnPlay.disabled = !has || recorder.isRecording || isPlaying;
    if(btnStop)   btnStop.disabled = !isPlaying;
    if(btnClear)  btnClear.disabled= !has || recorder.isRecording;
    if(btnSave)   btnSave.disabled = !has || recorder.isRecording;
  }

function resizeScope(){
    const dpr=window.devicePixelRatio||1;
    const r=scopeCanvas.getBoundingClientRect();
    scopeCanvas.width=Math.max(1,Math.round(r.width))*dpr;
    scopeCanvas.height=Math.max(1,Math.round(r.height))*dpr;
    scopeCtx.setTransform(dpr,0,0,dpr,0,0);
  }

function syncWaveformUI(){
    if(!waveformSeg) return;
    Array.from(waveformSeg.children).forEach(b=>b.classList.toggle("active", b.dataset.wave===currentWave));
  }

if(waveformSeg){
    waveformSeg.addEventListener("click", ev=>{
      const b=ev.target.closest("button[data-wave]"); if(!b) return;
      currentWave=b.dataset.wave; syncWaveformUI();
      activeVoices.forEach(v=>{ try{ v.osc1.type=currentWave; v.osc2.type=currentWave; }catch(_){} });
    });
  }
  if(volumeInput) volumeInput.addEventListener("input", ()=>{
    const v=parseFloat(volumeInput.value); volumeVal.textContent=Math.round(v*100)+"%";
    if(masterGain) masterGain.gain.setTargetAtTime(v,audioCtx.currentTime,0.015);
  });
  if(octaveInput) octaveInput.addEventListener("input", ()=>{
    octaveShift=parseInt(octaveInput.value,10);
    octaveVal.textContent = octaveShift>0? "+"+octaveShift : String(octaveShift);
  });
  if(btnRecord) btnRecord.addEventListener("click", ()=>{ recorder.isRecording? stopRecording() : startRecording(); });
  if(btnPlay)   btnPlay.addEventListener("click", ()=>{ if(recorder.events.length) playbackEvents(recorder.events); });
  if(btnStop)   btnStop.addEventListener("click", ()=>{ stopPlayback(); if(recorder.isRecording) stopRecording(); });
  if(btnClear)  btnClear.addEventListener("click", ()=>{ if(recorder.isRecording) return; recorder.events=[]; timerEl.textContent="00:00.0"; setStatus("Temizlendi","warn"); updateControlStates(); });
  if(btnSave)   btnSave.addEventListener("click", saveCurrentRecording);

buildKeyboard();
  savedRecordings = loadArchive();
  renderArchive();
  volumeVal.textContent = Math.round(parseFloat(volumeInput.value)*100)+"%";
  octaveVal.textContent = "0";
  syncWaveformUI(); updateControlStates();
  resizeScope(); drawScopeFrame();
  window.addEventListener("resize", resizeScope, {passive:true});
  setStatus("Hazır — bir tuşa basın", null);
})();

🤖 YAPAY ZEKA (AI) PROMPTU ChatGPT / Claude / v0

Bu enstrümanı yapay zekaya sıfırdan yazdırmak, farklı bir tını motoruna dönüştürmek veya React/Vue bileşenine taşımak için hazır prompt:

Bana modern web standartlarına (HTML5, CSS3, Vanilla JS ES2020+) tam uyumlu, harici kütüphane kullanmayan bir "Tek Sayfa Web Audio Enstrümanı (Vanilla Synth)" oluştur.

Gereksinimler:
1. Ses Motoru: Web Audio API kullanarak çok sesli (polyphonic) sentez. Her nota için iki osilatör (biri detune edilmiş), BiquadFilter (lowpass) ve ADSR genlik zarfı. Sinyal zinciri: voices → masterGain → DynamicsCompressor → AnalyserNode → destination.
2. Kullanıcı Arayüzü: Koyu tema (dark mode), flexbox tabanlı akışkan piyano klavyesi (2 oktav). Beyaz tuşlar flex, siyah tuşlar yüzde bazlı mutlak konumlandırma ile hizalanmalı.
3. Etkileşim: Fiziksel klavye kısayolları (A W S E D F T G Y H U J K), pointer events ile dokunmatik/fare desteği, pointer capture ile note-off güvenilirliği.
4. Kayıt Sistemi: Nota başlangıç zamanı ve sürelerini bellekte tutan bir kayıt motoru. setTimeout tabanlı oynatma. localStorage üzerinde kalıcı arşiv (isim, dalga formu, olay dizisi).
5. Görselleştirme: AnalyserNode verisini Canvas 2D ile osiloskop olarak çizen, devicePixelRatio'ya göre ölçeklenen bir scope.
6. Dalga Formu Seçici: sine / triangle / sawtooth / square arasında canlı morphing (aktif seslerin tınısı anında güncellenmeli).
7. Kod Yapısı: Tek HTML dosyasında `

piyano

Kayıtlı Favorilerim