Audio Coding in the Browser: Building Cities and Memory Player

Outside of enterprise IT platforms, my development projects extend into creative audio coding and music portals. One of the most rewarding collaborations has been building the interactive mapping interface and media players for Cities and Memory, one of the world’s largest collaborative sound art and field recording databases.

Designing the Interactive Sound Map

The core challenge of Cities and Memory is allowing users to explore thousands of field recordings geographically. To accomplish this, we built a custom mapping interface that overlays audio pins onto a responsive global map.

Key design criteria included:

1. Dynamic Pin Loading: Loading pins on-demand based on the map’s viewport bounds, preventing browser crashes from loading thousands of geo-points at once.
2. Audio Pre-buffering: Pre-loading short audio segments as hover states, giving users instant previews of field recordings.
3. Double-layer Soundscapes: Allowing users to seamlessly toggle between the original field recording and the reimagined sound art version while maintaining playback synchronization.

Browser-based Synthesizers with Tone.js

Building on this experience, I have developed browser-based audio tools for my own projects (such as Constant Pool). By using the Tone.js framework and the Web Audio API, we can build custom digital instruments, MIDI chord analysers, and Morse Code audio generators directly in clientside JavaScript.

Web audio coding requires careful scheduling and memory management:

• AudioContext Management: Ensuring the browser’s audio context is only initialised after direct user interaction (complying with modern browser policies).
• Latency Optimisation: Minimising buffer sizes and scheduling synth parameters slightly ahead of time using Tone.js’s lookahead clock.

These browser-based tools open up creative ways to experience sound and music directly in standard web browsers.