https://goodworld.in A website by Madhav Bhope
Indian Music Instrument body { text-align: center; font-family: Arial; background: #111; color: white; } h2 { margin-top: 15px; } .instrument { position: relative; width: 700px; margin: 30px auto; } /* White Keys */ .white-keys { display: flex; } .white { width: 80px; height: 220px; background: white; border: 2px solid black; margin: 1px; border-radius: 6px; color: black; display: flex; align-items: flex-end; justify-content: center; font-weight: bold; cursor: pointer; } /* Black Keys */ .black-keys { position: absolute; top: 0; left: 0; display: flex; pointer-events: none; } .black { width: 50px; height: 140px; background: black; margin-left: 55px; margin-right: 55px; z-index: 2; color: white; display: flex; align-items: flex-end; justify-content: center; font-size: 12px; pointer-events: auto; border-radius: 4px; cursor: pointer; } .active { background: orange !important; } .controls { margin-top: 20px; } button, input { margin: 5px; padding: 8px 12px; }

ЁЯО╡ Indian Music Instrument (Sa Re Ga Ma)

Sa
Re
Ga
Ma
Pa
Dha
Ni
Sa'
ReтЩн
GaтЩн
Ma#
DhaтЩн
NiтЩн
ЁЯФК Volume:
const AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext(); let volumeControl = document.getElementById("volume"); function playSound(freq) { const oscillator = audioCtx.createOscillator(); const gainNode = audioCtx.createGain(); // richer harmonium-like tone oscillator.type = "triangle"; oscillator.frequency.value = freq; gainNode.gain.value = volumeControl.value; oscillator.connect(gainNode); gainNode.connect(audioCtx.destination); oscillator.start(); gainNode.gain.exponentialRampToValueAtTime( 0.0001, audioCtx.currentTime + 1 ); oscillator.stop(audioCtx.currentTime + 1); recordNote(freq); } /* UI Interaction */ const keys = document.querySelectorAll(".key"); keys.forEach(key => { ["click","touchstart"].forEach(evt => { key.addEventListener(evt, () => { playSound(key.dataset.note); key.classList.add("active"); setTimeout(()=>key.classList.remove("active"),150); }); }); }); /* Keyboard Support */ const keyMap = { a:261.63, s:293.66, d:329.63, f:349.23, g:392.00, h:440.00, j:493.88, k:523.25 }; document.addEventListener("keydown", e => { let freq = keyMap[e.key]; if(freq) playSound(freq); }); /* Recording Feature */ let recording = []; let isRecording = false; let startTime; function recordNote(freq){ if(isRecording){ recording.push({ freq: freq, time: Date.now() - startTime }); } } function startRecording(){ recording = []; isRecording = true; startTime = Date.now(); alert("Recording started"); } function stopRecording(){ isRecording = false; alert("Recording stopped"); } function playRecording(){ recording.forEach(note => { setTimeout(()=>{ playSound(note.freq); }, note.time); }); }

Discover more from

Subscribe to get the latest posts sent to your email.

Say what you feel