Officina Serafin: Interactive Acoustic Luthier

Officina Serafin is a website for an Italian violin maker. The site has four interactive violin strings. Users can play with them live on screen. It works with either a mouse or a touchscreen.

Each string is tuned to real violin notes. The sound changes based on where you interact. Moving your cursor near the edge sounds sharp, doing it near the center sounds soft. Also fiddeling one string makes nearby strings vibrate too.

The page has a harmonics interface. You can tap a vibrating string at half or one-third/fourth lightness if necessary. Hovering too quickly cuts the main tone. It leaves a clean harmonic pitch sound. A live chart shows the active sound frequencies playing on the string.

The audio runs on the Web Audio API synthesis. The site has zero audio recordings. The code generates every sound in real time from cursor speed and movement. An HTML5 Canvas draws the strings moving at 60 frames per second. The page also shows wood grain design and a workshop build log UI.

Audio lag was the main problem to solve. Any delay between the release and the sound was noticeable, making the webpage feel less premium and optimised. Tuning the string vibration got in my nerves too. The movement needed a slow, natural flow. Long story short, looks cool to view but an utter b***ard to build.😂