OpenStreetMap Sound Demo

OpenStreetMap Sound Demo Taro Matsuzawa (@smellman) https://smellman.hatenablog.com/ KoedoLUG 2025/07 1

• https://x.com/smellman
• https://smellman.hatenablog.com/

自己紹介 Geolonia GIS Engineer Sub-President, Japan UNIX Society Director, OSGeo.JP Director, OpenStreetMap Foundation Japan Lead of United Nation OpenGIS/7 core 東京電機大学卒、CySec修了生 Breakcore cluster KoedoLUG 2025/07 2

本日のお題 OpenStreetMap Sound Demoの紹介、デモ、技術スタック Otherman Records の紹介とスクレイピング Web Audio APIの活用 CORS突破のproxyサーバーの構築 KoedoLUG 2025/07 3

OpenStreetMap Sound Demoの概要 OpenStreetMapの建物データを使って再生した音楽に応じて建物が変化するデモ 元々はMapboxが作っていたロジックを参考にしている 音楽の再生及び建物の高さ生成にはWeb Audio APIを使用 音源は全てOtherman Recordsのものを使用 KoedoLUG 2025/07 4

デモ https://smellman.github.io/osm-sound-demo/ KoedoLUG 2025/07 5

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

デモの技術スタック Vite + TypeScript MapLibre tile.openstreetmap.jpの建物データを使用 Location APIを使用して現在地を取得 BootstrapでUIを構築 Web Audio API KoedoLUG 2025/07 6

• https://vite.dev/
• https://www.typescriptlang.org/
• https://maplibre.org/
• https://getbootstrap.com/
• https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API

Otherman Recordsの紹介 Otherman Recordsは、ブレイクコアをメインに高クオリティな楽曲を配信する日 本のネットレーベル 主催のOthermoonは友人です Archive.orgを活用して、全ての楽曲をCC-BYライセンスで公開 KoedoLUG 2025/07 7

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

Otherman Recordsのスクレイピング Otherman Records自体JSON API及びNuxt.jsでサイトを構築している JSON APIのエンドポイントを解析して、楽曲のリリース一覧を取得及びアルバム の情報を取得している 勝手にやった 詳しい事は otherman-records.tsを参考にしてください KoedoLUG 2025/07 8

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

Web Audio APIの活用 初期バージョンは単に音源自体をローカルにコピーしていてそれをFetchしていた ローカルでの開発ではちゃんと動くが、一度にデータを全部読まないと音楽 が再生できないため、展示会などでのデモが厳しかった Web Audio APIを使う事で、ストリーミング再生に対応 ネットワークごしでも軽快に動作 KoedoLUG 2025/07 9

CORS突破のproxyサーバーの構築 archive.orgでCORSが有効になっていないものが大半 一部楽曲だけはCORSが有効という謎な状態 今、Othermoonにコンタクト取って確認してもらってる proxyサーバーをPythonで実装して、CORSを突破している https://github.com/smellman/archive-org-proxy KoedoLUG 2025/07 10

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

まとめ 女子大生に大受けでした KoedoLUG 2025/07 11