openstreetmap sound demo

OPENSTREETMAP SOUND DEMO TARO MATSUZAWA (@SMELLMAN) MAPLIBRE MEETUP HIROSHIMA 2026

WHO AM I • Director of OSGeo.JP / Staff of FOSS4G Hiroshima 2026 • Director of OpenStreetMap Foundation Japan • Sub president of Japan UNIX Society • UNOpenGIS/7 lead engineer. • Maintainer of Charites / Sprite-one. • GIS Engineer of Geolonia Inc.

OPENSTREETMAP SOUND DEMO • https://smellman.github.io/osm-sound-demo/ • A gimmick app that makes OpenStreetMap buildings rise and fall in sync with music. • Building heights change in real time in sync with the frequency spectrum of the music. • All tracks use Otherman Records (CC BY-NC 2.1 JP) • Tracks and albums from 109 releases were retrieved via the API. • The original inspiration was Mapbox's sound example, which was rebuilt using OSM.

• https://smellman.github.io/osm-sound-demo/
• https://www.otherman-records.com/
• https://docs.mapbox.com/mapbox-gl-js/example/dancing-buildings/

DEMO

TECHNICAL STACK • MapLibre GL JS — for 3D building fill-extrusion rendering • Map style/tiles: planet.pmtiles from tile.openstreetmap.jp • Web Audio API — FFT analysis using AnalyserNode • TypeScript + Vite — for the build • Bootstrap 5 — for the UI (About modal, etc.)

HOW THE BUILDING HEIGHTS ARE ANIMATED • Frequency data using fftSize = 32 → 16 bins on the AnalyserNode • Buildings are split into 16 tiers by render_height, each added as a separate fillextrusion layer • Each frame reads dataArray[i] and updates the fill-extrusion-height of layer 3dbuildings-i • The average amplitude drives changes in the HSL hue and intensity of setLight • Looped continuously via requestAnimationFrame

ANOTHER TOPIC • I'm running a proxy on my own server to resolve CORS issues in order to play music from Archive.org. • Python: FastAPI + httpx • VJ mode:You can use any source via Loopback.app (macOS) or PipeWire (Linux).