OpenStreetMap Sound Demo - State of the Map 2025

OpenStreetMap Sound Demo Taro Matsuzawa (@smellman) State of the Map 2025 Manila State of the Map 2025 Manila 1

• https://x.com/smellman

Self introduction GIS Engineer at Geolonia Director, OSGeo.JP Director, OpenStreetMap Foundation Japan Maintainer of tile.openstreetmap.jp Lead Engineer for the United Nations OpenGIS/7 Core Breakcore cluster Newbie with StreetComplete State of the Map 2025 Manila 2

What is OpenStreetMap Sound Demo? Demonstration website: Buildings that dance with OpenStreetMap building data and music Original demo from Mapbox Ref: https://docs.mapbox.com/mapbox-gl-js/example/dancing-buildings/ Using the Web Audio API to play music and calculate building heights All music by OthermanRecords State of the Map 2025 Manila 3

• https://docs.mapbox.com/mapbox-gl-js/example/dancing-buildings/

Demo https://smellman.github.io/osm-sound-demo/ State of the Map 2025 Manila 4

• https://smellman.github.io/osm-sound-demo/

Tech Stack https://github.com/smellman/osm-sound-demo/blob/main/src/main.ts Vite + TypeScript MapLibre Using building data from tile.openstreetmap.jp Using Location API to get current location Using PMTiles to reduce load User interface built with Bootstrap Web Audio API for audio processing State of the Map 2025 Manila 5

• https://github.com/smellman/osm-sound-demo/blob/main/src/main.ts
• https://vite.dev/
• https://www.typescriptlang.org/
• https://maplibre.org/
• https://getbootstrap.com/

OthermanRecords https://www.otherman-records.com/ OthermanRecords is an independent online label run by Othermoon, who has been involved in breakcore for over 20 years. This label releases all music under a CC-BY license and distributes it via archive.org State of the Map 2025 Manila 6

• https://www.otherman-records.com/

Scraping OthermanRecords https://github.com/smellman/osm-sound-demo/blob/main/src/othermanrecords.ts OthermanRecords exposes a JSON API. The JSON API is used to build a website with Nuxt.js I analyzed it on my own without permission. State of the Map 2025 Manila 7

• https://github.com/smellman/osm-sound-demo/blob/main/src/otherman-records.ts

Supports CORS https://github.com/smellman/archive-org-proxy Most music on archive.org has CORS disabled. I developed a proxy server with Python to bypass CORS. State of the Map 2025 Manila 8

• https://github.com/smellman/archive-org-proxy

VJ mode VJ mode reacts to any music. macOS: use Loopback.app Music.app(or other audio source) -> Loopback.app -> Browser Linux: use Pipewire Moves to a random location every 60 seconds. State of the Map 2025 Manila 9

Want to try it? https://smellman.github.io/osm-sound-demo/ Thank you! State of the Map 2025 Manila 10

• https://smellman.github.io/osm-sound-demo/