forked from google/gemma.cpp
-
Notifications
You must be signed in to change notification settings - Fork 0
RDS DEMOS
Jason Guest edited this page Oct 28, 2024
·
1 revision
<title>Xylophone</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.key {
height: 100px;
width: 50px;
cursor: pointer;
border-radius: 5px;
transition: transform 0.1s ease;
}
.key:active {
transform: translateY(5px);
}
</style>
<script>
const keys = document.querySelectorAll('.key');
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
keys.forEach(key => {
key.addEventListener('mousedown', () => playSound(key));
key.addEventListener('touchstart', () => playSound(key));
});
function playSound(key) {
const frequency = key.dataset.frequency;
const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
oscillator.frequency.value = frequency;
oscillator.type = 'sine'; // Simulate a clear tone
gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime); // Start with a lower volume
gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5); // Fade out smoothly
oscillator.start();
oscillator.stop(audioCtx.currentTime + 0.5); // Stop sound after a short duration
}
</script>
Click or tap on the keys to play!
https://fa8089-2.myshopify.com/cart/50297919373543:1?channel=buy_button
`
<title>Xylophone</title> <script src="https://cdn.tailwindcss.com"></script>Click or tap on the keys to play!
https://fa8089-2.myshopify.com/cart/50297919373543:1?channel=buy_button`