Project

The shape of sound

Voice and sound drive the visuals

When
2019
What
Interactive web sound visualization
Role
Project concept, Web development
Skills
Web Audio API, Canvas

This project shows a transition of images reacting by voices or other sound. I've been thinking a lot about how sound, an invisible element, can be converted into a visual element. As part of that, I created fun visuals and made them transform in fun ways when the user made any sound. I first tested it using Processing and then used the Web Audio API and canvas tag to make this interactive design usable on the website. When the user makes a sound through the microphone, the corresponding visual elements are transformed based on the sound information.

Let's try!

Use a microphone to experience audio transformation.

1. Select a shape type from the dropdown.

2. Make a sound (your voice or other sounds).

3. Watch the visuals change with the sound.

The shape of sound