Indian Notes Instrument
body {
text-align: center;
font-family: Arial, sans-serif;
background: #f4f4f4;
}
h2 {
margin-top: 20px;
}
.instrument {
display: flex;
justify-content: center;
margin-top: 30px;
}
.key {
width: 70px;
height: 200px;
margin: 5px;
background: white;
border: 2px solid black;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: flex-end;
justify-content: center;
font-weight: bold;
padding-bottom: 10px;
transition: 0.1s;
}
.key:active, .active {
background: #ffd166;
transform: scale(0.95);
}
ЁЯО╡ Play Indian Notes (Sa Re Ga Ma)
Use mouse or keyboard: A S D F G H J K
Sa
(A)
Re
(S)
Ga
(D)
Ma
(F)
Pa
(G)
Dha
(H)
Ni
(J)
Sa'
(K)
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
function playSound(freq) {
const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
oscillator.type = "sine";
oscillator.frequency.value = freq;
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
oscillator.start();
gainNode.gain.exponentialRampToValueAtTime(
0.0001, audioCtx.currentTime + 1
);
oscillator.stop(audioCtx.currentTime + 1);
}
const keys = document.querySelectorAll(".key");
keys.forEach(key => {
key.addEventListener("click", () => {
playSound(key.dataset.note);
key.classList.add("active");
setTimeout(() => key.classList.remove("active"), 150);
});
});
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) => {
const freq = keyMap[e.key.toLowerCase()];
if (freq) {
playSound(freq);
keys.forEach(key => {
if (key.dataset.note == freq) {
key.classList.add("active");
setTimeout(() => key.classList.remove("active"), 150);
}
});
}
});
