Next.js Conf 2024: Your app should be Live by Default – Watch Keynote

Bright Notion

By Simon Rogers

DOM-as-audio-visualiser for an independent music publisher

About the project

Bright Notion are an independent music publisher, who needed a small website to promote the artists they represent and define themselves in the industry.

The main feature of the website is the DOM-as-audio-visualiser, something I’ve long dreamt of doing in any guise that someone would let me. By sampling the audible audio spectrum of a given song, I was able to generate an array of numbers which I dispatched to a Vuex store to be used at leisure throughout the application.

I initially started by animating choice bits of title text as appropriate, however I’ve long been inspired by Simeon Grigg’s ingenious cookery website, which used Sanity’s Portable Text to enrich the cookery experience for users with dynamic measurements. Since coming across it, I’ve been far more attentive in looking for opportunities to exploit Portable Text for fun opportunities of my own...

In this case, I realised it would be possible to make some simple text annotations – one, named "PartyMode", a simple boolean which rendered any text selected as music-responsive, and another which accepted a reference to a specific piece of music, hereby acting as another trigger to play the song, and facilitating the dancing text within a paragraph context.

Contributor

Other projects by author

Becontree Forever

A programme of art, architecture and infrastructure to mark the centenary of the UK’s biggest council housing estate

Simon Rogers
Go to Becontree Forever

UBIK Productions

A Mr. Clippy-inspired website for an experimental film and virtual reality production company.

Simon Rogers
Go to UBIK Productions