OpenStreetMap Sound Demo - FOSS4G Hokkaido 2025

OpenStreetMap Sound Demo FOSS4G Hokkaido 2025 Taro Matsuzawa (@smellman) 2025/09/27

自己紹介 • Geolonia GIS エンジニア • OSGeo.JP 理事 • OpenStreetMap Foundation Japan 理事 • Lead Engineer of United Nation OpenGIS/7 core • 東京電機大学卒、CySec修了生 • Breakcore cluster

本日のお題 • OpenStreetMap Sound Demoの紹介、デモ、技術スタック • OpenMapTilesにおける高さについて • OthermanRecordsの紹介とスクレイピング • Web Audio APIの活用 • CORS 突破のproxyサーバーの構築

OpenStreetMap Sound Demoとは • OpenStreetMapの建物データを使って再生した音楽に応じて建物が変化する デモ • 元々はMapboxが作っていたロジックを参考にしている • Ref: https://docs.mapbox.com/mapbox-gl-js/example/dancingbuildings/ • 音楽の再生及び建物の高さ生成にはWeb Audio APIを使用 • 音源は全てOthermanRecordsのものを使用

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

デモ https://smellman.github.io/osm-sound-demo

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

技術スタック https://github.com/smellman/osm-sound-demo/blob/main/src/main.ts • Vite + TypeScript • MapLibre GL JS • tile.openstreetmap.jp の建物データを使用 • Location APIを利用して現在地を取得 • PMTilesを利用(負荷低減のため) • BootstrapでUIを構築 • Web Audio API

• https://github.com/smellman/osm-sound-demo/blob/main/src/main.ts
• http://tile.openstreetmap.jp

OpenMapTilesにおける高さの表現 https://github.com/openmaptiles/openmaptiles/blob/master/layers/building/building.sql#L101 • tile.openstreetmap.jp の基盤であるOpenMapTilesでは、OpenStreetMap のデータから高さ(render̲height)を計算している • ロジックは以下の通り • key=height があればその value を利用 • 無ければ key=levels の value に 3.66 をかけた数字を利用 • 両方無ければ、 5 を利用

• https://github.com/openmaptiles/openmaptiles/blob/master/layers/building/building.sql#L101
• http://tile.openstreetmap.jp

OthermanRecordsの紹介 https://www.otherman-records.com/ • OthermanRecordsは、ブレイクコアをメインに高クオリティな音源を配信 する日本のネットレーベル • 主催のOthermoonは友人です • Archive.orgを活用して、全ての楽曲をCC-BYライセンスで公開

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

OthermanRecordsのスクレピング https://github.com/smellman/osm-sound-demo/blob/main/src/otherman-records.ts • OthermanRecords自体JSON APIを公開している • Nuxt.jsでサイトを構築するため実装されている • JSON APIのエンドポイントを勝手に解析して、楽曲のリリース一覧及びアル バム情報の取得をしている • 本当に勝手にやってる

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

Web Audio APIの活用 https://developer.mozilla.org/ja/docs/Web/API/Web̲Audio̲API • 初期バージョンでは単に音源自体をローカルにコピーして、それをFetch関数 で取得していた • ローカルではちゃんと動くが、展示会などのネットワーク経由ではデモが 厳しくなった • Web Audio APIを使う事で、ストリーミング再生に対応 • ネットワークごしでも快適に動作

• https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API

CORSの壁 https://github.com/smellman/archive-org-proxy • Archive.orgでCORSが有効になっていないものが大半 • 一部楽曲のみ何故かCORSが有効になっている • ProxyサーバーをPythonで実装して、CORSを突破するようにしている

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

VJモードの搭載 • VJモードは任意の音楽に合わせて動くモード • macOSならLoopback、LinuxならPipewireを使って音楽をキャプション する • Windowsは知らん • 60秒ごとにランダムで場所を移動

改めてデモ https://smellman.github.io/osm-sound-demo

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