A minimal static demo that reproduces a realistic WebGL water ripple shader and triggers ripples in time with an audio file using the Web Audio API.
How to run:
-
Install a static file server if you don't have one. The project uses
http-servervia npx for convenience. -
Start the server:
npm run start- Open http://localhost:8080 in your browser.
Usage:
- Use the controls in the top-left to select a background image and an audio file.
- Click "Play" to start playback and audio analysis. Ripples will be triggered automatically in time with detected audio peaks. You can also click or enable "Hover Ripples" to create ripples manually.
Notes:
- This demo is kept dependency-free and works in modern browsers that support WebGL and the Web Audio API.
- If the audio file is not played due to autoplay restrictions, click the Play button to grant audio context resume permission.