OpenStreetMap Sound Demoの話

OpenStreetMap Sound Demo の話 Taro Matsuzawa (@smellman) OSGeo.JP/OSMFJ/jus/Geolonia Inc. 2026/05/28

自己紹介 ● 松澤 太郎 (Taro Matsuzawa / @smellman) ● 一般社団法人 OpenStreetMap Foundation Japan (OSMFJ) 理事 ● 一般社団法人 OSGeo 日本支部(OSGeo.JP) 理事 ● 日本 UNIX ユーザ会 副会長 ● UNOpenGIS/7 lead enginner ● 株式会社 Geolonia GIS エンジニア ● かつてもじら組という組織の代表だったこともある OSS Stupid Program 2025 2 / 21

OpenStreetMap Sound Demo とは

OpenStreetMap Sound Demo ● URL: https://smellman.github.io/osm-sound-demo/ ● OpenStreetMap の建物を音楽に合わせて上下させる ネタアプリ ● 楽曲の周波数スペクトルで 3D ビルの高さがリアルタイムに変化 ● 楽曲は Otherman Records (CC BY-NC 2.1 JP) を全曲利用 ● 109 リリース分のトラック・アルバムを API 経由で取得 ● 元ネタは Mapbox の sound example、それを OSM で再構築 OSS Stupid Program 2025 4 / 21

• https://smellman.github.io/osm-sound-demo/
• https://www.otherman-records.com/

デモ画面（東京駅周辺） OSS Stupid Program 2025 5 / 21

About モーダル OSS Stupid Program 2025 6 / 21

OpenStreetMap とは

OpenStreetMap (OSM) ● 世界中のマッパーが作る 自由に編集・再配布できる 世界地図 ●「地図版 Wikipedia」と呼ばれることも ● 2004 年に Steve Coast が英国で開始 ● データは ODbL (Open Database License) で配布 ● 道路・建物・店舗・水路・地形などあらゆる地物を含む ● 日本では OpenStreetMap Japan 及び OpenStreetMap Foundation Japan (OSMFJ) が活動 OSS Stupid Program 2025 8 / 21

OpenStreetMap での僕の役割 ● OpenStreetMap Foundation Japan (OSMFJ) で理事 ● tile.openstreetmap.jp の管理人 ● openstreetmap.jp の再構築担当 ● Open Source Conference などに OpenStreetMap Japan コミュニティとして出 展 ● マッパーの一人、主に 千葉市若葉区 を中心にマッピング OSS Stupid Program 2025 9 / 21

OSM には建物の高さも入っている ● 建物には height / building:levels などのタグが付与可能 ● 都市部はマッパーが地道に入力しており、高さデータが豊富 ● これがあるおかげで 3D ビル としてレンダリングできる ● 今回のデモはこの 建物の高さ を音楽に合わせて動かしている ● つまり OSM のデータがなければ成立しない遊び OSS Stupid Program 2025 10 / 21

仕組み

技術スタック ● MapLibre GL JS — 3D ビルの fill-extrusion 描画 ● PMTiles — 単一ファイルでベクトルタイル配信 ● 地図スタイル/タイル: tile.openstreetmap.jp の planet.pmtiles ● Web Audio API — AnalyserNode で FFT 解析 ● TypeScript + Vite — ビルド ● Bootstrap 5 — UI（About モーダルなど） OSS Stupid Program 2025 12 / 21

建物の高さはどう動かしているか ● AnalyserNode の fftSize = 32 → 16 ビン の周波数データ ● 建物を render_height で 16 段階 に分割し、 それぞれ別レイヤとして fill-extrusion を追加 ● 各フレームで dataArray[i] を取り、 レイヤ 3d-buildings-i の fill-extrusion-height を更新 ● 平均振幅で setLight の HSL 色相と intensity を変化 ● requestAnimationFrame でぐるぐる OSS Stupid Program 2025 13 / 21

VJ モード ● PC のスピーカー出力をそのまま音源として取り込むモード ● getUserMedia({ audio: true }) で仮想入力デバイスから取得 ● Linux: PipeWire の module-remap-source で仮想マイクを作成 ● macOS: Loopback.app で出力 → 仮想入力にルーティング ● DJ アプリでも YouTube でも、何を流しても建物が踊る OSS Stupid Program 2025 14 / 21

Archive.org の CORS 問題

Otherman Records の音源は Archive.org 配信 ● Otherman Records の楽曲ファイルは archive.org に置かれている ● ブラウザから直接 fetch すると一部（というか大半）で CORS エラー ● crossOrigin = 'anonymous' を付けても通らないリソースが多数 ● そのままでは Web Audio API に MediaElementSource として渡せない ● → ストリーミング再生ができない OSS Stupid Program 2025 16 / 21

VPS 上に Proxy を建てた ● GitHub: https://github.com/smellman/archive-org-proxy ● FastAPI + httpx で書いた小さなプロキシ ● proxy.smellman.org/proxy/{host}/{path} で archive.org を中継 ● CORSMiddleware で * 許可、ブラウザから普通に取得可能に ● Range ヘッダを透過転送 → シーク再生 / ストリーミングが動く ● host.endswith('archive.org') のみ許可（Open Proxy 化の防止） OSS Stupid Program 2025 17 / 21

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

Proxy 実装のポイント ● httpx.AsyncClient(follow_redirects=True) で 302 を辿る ● StreamingResponse で aiter_bytes() を流すだけのシンプル実装 ● Content-Type / Content-Length / Content-Range / Accept-Ranges を返す ● Docker / docker-compose で VPS に常駐させて運用 ● ネタアプリのために本気のインフラが組み上がっていく OSS Stupid Program 2025 18 / 21

開発遍歴

ここまでの道のり 1. 最初は mp3 をリポジトリに直置き 2. ストリーミング非対応で、Open Source Conference 等のデモで 通信エラーが頻 発 した 3. Otherman Records に楽曲情報の API があることに気づき、 勝手にスクレイピン グ する実装に変更 4. archive.org の楽曲が CORS 問題 で再生できず、 VPS に Proxy を実装して回避 5. 最後に VJ モード を実装して完成 OSS Stupid Program 2025 20 / 21

まとめ ●「地図と音を合わせたら面白そう」だけで作ったネタアプリ ● MapLibre の fill-extrusion + Web Audio AnalyserNode の素直な組み合わせ ● CORS 回避のためだけに VPS にプロキシを建てる というアホなインフラ ● VJ モードで DJ アプリ流しながら街が踊る、いつでもどこでも DJ 気分 ● ソース: https://github.com/smellman/osm-sound-demo OSS Stupid Program 2025 21 / 21

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