Sound Demo
Hover or click on each button to hear the sound
ClickSound (Web Audio API)
Uses audio files with Web Audio API for playback
preset="general" src: /click.mp3 hover: vol 0.15, rate 1.5 click: vol 0.4, rate 1
preset="settings" src: /click2.mp3 hover: vol 0.1, rate 1.8 click: vol 0.3, rate 1.2
preset="special" src: /click3.mp3 hover: vol 0.2, rate 1.3 click: vol 0.5, rate 0.9
preset="soft" src: /click4.mp3 hover: vol 0.08, rate 1.6 click: vol 0.2, rate 1.1
preset="sharp" src: /click5.mp3 hover: vol 0.12, rate 1.4 click: vol 0.35, rate 1
preset="deep" src: /click6.mp3 hover: vol 0.1, rate 1.2 click: vol 0.4, rate 0.8
Usage
<ClickSound preset="general">
<button>Click me</button>
</ClickSound>
<!-- With overrides -->
<ClickSound
preset="soft"
hoverVolume={0.3}
clickRate={1.2}
>
<button>Custom</button>
</ClickSound>ToneSound (Tone.js Synth)
Uses Tone.js synthesizers for generated sounds
preset="general" synth: synth hover: C5, 32n, vel 0.2 click: C4, 16n, vel 0.5
preset="soft" synth: am hover: E5, 32n, vel 0.15 click: E4, 16n, vel 0.35
preset="pluck" synth: pluck hover: G5, 32n, vel 0.25 click: G4, 8n, vel 0.5
preset="digital" synth: fm hover: A5, 64n, vel 0.2 click: A4, 32n, vel 0.4
preset="drum" synth: membrane hover: C3, 32n, vel 0.15 click: C2, 16n, vel 0.4
preset="bell" synth: metal hover: C6, 16n, vel 0.1 click: C5, 8n, vel 0.3
Usage
<ToneSound preset="pluck">
<button>Pluck</button>
</ToneSound>
<!-- With overrides -->
<ToneSound
preset="digital"
clickNote="F4"
clickVelocity={0.8}
>
<button>Custom</button>
</ToneSound>