Home

Jump to bottom

Jason Guest edited this page Oct 28, 2024 · 1 revision

Welcome to the risedefsysgemma.cpp wiki!

`

<title>Xylophone</title> <script src="https://cdn.tailwindcss.com"></script>

Interactive Xylophone

Click or tap on the keys to play!

<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>

https://fa8089-2.myshopify.com/cart/50297919373543:1?channel=buy_button`

Clone this wiki locally