---
title: openstreetmap sound demo
tags:  #openstreetmap #maplibre  
author: [Taro Matsuzawa aka. btm](https://image.docswell.com/user/smellman)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/L71YX1QKJG.jpg?width=480
description: MapLibre Meetup Hiroshima 2026
published: September 03, 26
canonical: https://image.docswell.com/s/smellman/KMQ3R6-2026-09-03-openstreetmap-sound-demo
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/L71YX1QKJG.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/G7WGN8MPE2.jpg)

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.


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4JZL38Q6E3.jpg)

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.


# Page. 4

![Page Image](https://bcdn.docswell.com/page/YE6WXP6LEV.jpg)

DEMO


# Page. 5

![Page Image](https://bcdn.docswell.com/page/GE5MXK6ME4.jpg)

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.)


# Page. 6

![Page Image](https://bcdn.docswell.com/page/9729XWMRJR.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/DJY48LX57M.jpg)

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).