Skip to content

milodavidson/ripple-test

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

WebGL Ripple Audio Sync

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:

  1. Install a static file server if you don't have one. The project uses http-server via npx for convenience.

  2. Start the server:

npm run start
  1. 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.

About

Created with StackBlitz ⚡️

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published