A Sheffield based media company has created a prototype Web project that tells the story behind classical music using a combination of HTML 5 and Javascript.

Mudlark’s Orchestrated Text lends a context for “Winter” from Vivaldi’s Four Seasons. As the page loads and the music begins to play, descriptive text emerges that aims to deepen the listener’s experience. It explains how the discordant notes and melodies are used to evoke Vivaldi’s vision of snow, winds, and winter scenes.

The project’s creator, Richard Birkin, began coding the project wrapped up in a blanket over Christmas. Having worked on a pitch for a classical music label that utilized the brand’s album sleeve notes accompanying each CD or vinyl, Birkin set out on creating his own project. He wanted to make a webpage that brought together the music and content notes of classical CDs, enhancing the listener’s experience without the hassle of creating and editing a video.

While Birkin found that javascript animations running alongside music would suffice on a local level but as soon as the pages were put on a server the javascript would load instantly, falling out of sync with the music while it buffered.

Undeterred, he found a solution in the form of an HTML5 animation, Chell in the Rain for Portal 2.

“It was a sort of delicate doddle,” Birkin told Wired.co.uk. “The code that I began with was written by Nick Catalano and Matt Merkle for their Portal 2 site. I’m not an expert in Javascript, but it was easy to grasp the timing triggers, animation sequences, and ‘lyrics’ and go from there. The hardest part was setting up the run of animations, and resequencing if I decided to add a new line in after I’d already progressed beyond it.”