<div style="text-align:center;">
<h2>Bostan Mini Piano</h2>
<div id="piano">
<button onclick="play('C')">C</button>
<button onclick="play('D')">D</button>
<button onclick="play('E')">E</button>
<button onclick="play('F')">F</button>
<button onclick="play('G')">G</button>
<button onclick="play('A')">A</button>
<button onclick="play('B')">B</button>
</div>
</div>

<script>
function play(note){
const ctx = new (window.AudioContext || window.webkitAudioContext)();
const osc = ctx.createOscillator();
const gain = ctx.createGain();

const notes = {
C: 261.63,
D: 293.66,
E: 329.63,
F: 349.23,
G: 392.00,
A: 440.00,
B: 493.88
};

osc.frequency.value = notes[note];
osc.type = "sine";

osc.connect(gain);
gain.connect(ctx.destination);

osc.start();
gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 1);
}
</script>