Presentation
Click to see more
Interactive demos
Click to see more
Audio library rework
Click to see more
3D cards
Click to see more
Other contributions
Click to see more
Presentation
Arturia is a French company that makes software and hardware synthesizers, audio interfaces and MIDI controllers.
Context
To complete my diploma, I did a 6-month internship as a full-stack developer at Arturia. During this internship, I had one mission: maintain and improve existing components and develop new ones for the Arturia website.
After the internship, I was hired as a full-stack developer to continue this mission, and I still work there today.
Interactive demos
To showcase the software effects on the website, we use small interactive demos built with the Web Audio API.
They work by playing multiple audio files at the same time and blending them together.
Examples
Available here:
Arturia EFX RefractAvailable here:
Arturia Tape Mello-FiAudio library rework
The and audio players relied on a custom audio library. Unfortunately, it was hard to use and had a lot of edge cases, so I decided to write a new one.
The previous library created one audio player per audio component. Separate players can't be started in exact sync, so layered playback drifted apart. The new library uses a single audio player for the whole application: when an audio component is played, it updates that player to fetch the new audio files.
And here's what it sounds like:
Simple audio player
A/B audio player
This library also makes it easy to draw waveforms. The tradeoff: audio can't be streamed, so each file must be fully downloaded before it plays.
3D cards
For the release of V Collection 11, I was asked to create a 3D card inspired by Simon Goellner's Pokémon holo cards.
I reworked it for this website, and here's what I came up with:
Variant:
You can see my first version on the V Collection page.
Other contributions
Keycloak implementation
The Arturia website used Joomla as its identity provider. To move away from Joomla, we switched to Keycloak: the ops team deployed our own instance, and I led the website integration.
Our login form lives in a modal, and we wanted to keep it there: users sign in without ever leaving the page they're on. So instead of redirecting to Keycloak's login page, the website talks to Keycloak only through its API, via the Nuxt server (Nitro). This covers login, logout, sign-up, password reset and token introspection.
Existing accounts didn't need to be migrated: a custom user federation, built by an external agency, lets Keycloak read the existing user database directly. With millions of accounts in that database, this integration now handles every sign-in on the website.
Component sharing with a layer
arturia.com and the Arturia store are two separate Nuxt projects, maintained by different teams, but some of their components are identical. To stop duplicating them, I set up a Nuxt layer, published as a private npm package on our self-hosted GitLab (a CI pipeline releases a new version on every tag), and integrated it into both projects.
It currently holds the header and footer, and the goal is to move more and more shared components into it over time.