Telharmonium Web

Migrating an electromechanical installation to the Web.

Tools: Vue.js, AWS
Experience the Telharmonium Web yourself on

The Telharmonium Web is a web-hosted digital recreation of the Telharmonium 2.0 installation by Xavier Ménard and Camille St-Amand, under the Ménard/St-Amand moniker. It was launched on November 18th 2020 as part of a digital residency offered by artist-run centre DAÎMÖN.

The “melody” module

Xavier Ménard approached me in the summer 2020 with his idea of transposing his 2019 installation to the web. Since I was the programmer for the original installation, it made sense for me to lead the Telharmonium‘s transition from the physical world to the digital world. This new web application would be part of the brand new website for the Ménard/St-Amand duo, which would be launched at the same time as the Telharmonium Web.

Close-up of the “drum” module

The whole website is a statically-served single-page application (SPA) developed entirely using Vue.js, which was chosen because of its great documentation, powerful component philosophy and its relative simplicity compared to other frameworks and libraries such as React or Angular. Although this was my first project with Vue, I had already plenty of experience with React while working on Scenic, so the learning curve was pretty smooth.

My main job was to develop the logic behind the Telharmonium Web component. Camille St-Amand designed the general website UI and the various graphical assets, while Xavier focused on implementing the UI designed by Camille and writing the website’s CSS. On the audio side of things, I leveraged the Howler.js to bring the Telharmonium to life.

Additonally, I assumed a DevOps role for this project. I chose to host the website on an AWS S3 bucket configured for static website hosting, since the SPA required no server-side computing and it was cheaper and simpler than to host it on an EC2 server, for instance. I was in charge of setting up the Gitlab repo hosting the project, creating and managing the Amazon Web Services account and buckets, and creating the Gitlab CI/CD pipeline that takes care of auto-magically pushing new versions of the website to the production bucket on new releases.