NMC Music Map – HTML5 Conversion

In 2016 NMC Recordings asked us to update the original Flash based Music Map that we first developed in 2010.

The Music Map is an innovative visual web app which allows users to explore the NMC composers using the relationships ‘who composer studied with’ and ‘similar composers’. Suggested historical categories are represented with orbiting discs around the focused composer. For each composer there are one minute audio samples so the user has both a visual and sonic experience when navigating between the composers. There is a dynamic search facility to quickly locate your starting composer.

Explore the Music Map starting with Howard Skempton’s eerie and simple work Lento.

The Music Map is pulling data from the same Drupal database as the NMC Website using the Drupal JSON:API. You could describe the Music Map as a headless Drupal Web Application.

Converting from Flash to HTML5/Javascript required the use of a graphics library to draw to the HTML5 Canvas Element. We evaluated several frameworks, including P5.js, and found that Paper.js offered the best performance for our requirements. We considered the 3D framework three.js but browser compatibility was an issue.

We used the HTML5 Audio Element to build an integrated custom audio player.

Music Map
Music Map
Music Map
Music map
Music Map
Music Map
Music Map

Press

https://www.theguardian.com/music/tomserviceblog/2010/mar/12/nmc-music-map-british-library

https://www.gramophone.co.uk/blogs/article/nmc-s-music-map-a-cool-new-gadget