ドライブ中の音楽データを取得して地図上に表示してみた

# はじめに

以前、Node-REDのモバイル版(iOS版はNode-PAD、Android版はRedMobile)を使用して車のIoTデータを地図上に表示することを試してみました。

https://qiita.com/kitazaki/items/ce61a63765b4069b1ed2

今回は持ち運び可能なSonos Roamを車の中に持ち込んで、ドライブ中の曲(音楽データ)を取得して地図上に表示することを試してみます。

![スクリーンショット 2022-01-24 22.24.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/1d6c4f2d-f43d-3318-dd0b-02d64d048a3a.png)

Sonosって何？！という方はこちらを参照してください。

https://qiita.com/kitazaki/items/ccde18e10f49fcbb9437

# Node-REDフロー

最初にNode-REDフローの全体像を示します。(今回はiOS版Node-PADを例に説明します)

![flow.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/400cff60-3778-b958-b01d-7e1a958a4548.jpeg)

## 必要なモジュール

メニュー　→ パレットの管理から以下のモジュールを追加します。

- node-red-contrib-better-sonos　‥Sonos Roamから再生している音楽情報を取得
- node-red-contrib-web-worldmap　‥地図データを表示しピンを立てる

### locationノード

毎秒に緯度・軽度の情報を出力します。

### delayノード

locationノードの出力頻度が多いため、10秒に1回へ削減します。

![スクリーンショット 2022-01-24 22.37.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/0c700b4f-41a0-01c5-662e-3fadc786ab8f.png)

### changeノード (1つ目)

緯度・軽度の情報をmsg.payloadから取得し、msg.latとmsg.lonへ設定します。
後続のSonos Statusノードでmsg.payloadの内容が曲(音楽データ)に上書きされてしまうためです。

![スクリーンショット 2022-01-24 22.39.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/74403a47-c0e6-49ff-8fff-acb93074f1c4.png)

### Sonos Statusノード

Sonos RoamのSerial Number (Macアドレス)を検索(虫眼鏡のマークを押す)、または、IPアドレスを入力します。

![スクリーンショット 2022-01-24 22.41.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8536fe8f-ac8c-ef63-556e-bb8d111dc1a4.png)

![スクリーンショット 2022-01-24 22.41.41-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/20fa35ca-fa3f-431c-da86-7de6b2dca67f.png)

### changeノード (2つ目)

緯度・軽度、曲(音楽データ)を取得し、JSONata形式でmsg.payloadに設定します。
曲名はnameキーに設定します。

![スクリーンショット 2022-01-24 22.45.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/b879ce6e-594a-a23c-9f41-1f08cc98ba77.png)

![スクリーンショット 2022-01-24 22.45.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8b6d68f4-ec3b-6807-6021-6b8d5a0f4918.png)

### worldmapノード

スタート地点(Start項目)の緯度(Latitude)・軽度(Longitude)、地図の縮尺(Zoom)を指定します。

![スクリーンショット 2022-01-24 22.48.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/14d37ed2-8c70-62e5-f8db-e0c37af3b5e9.png)

## サンプルのフロー

```json:flows.json
[{"id":"b017b8c4.bbce28","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"ba301ca9.d8d5b8","type":"debug","z":"b017b8c4.bbce28","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":670,"y":60,"wires":[]},{"id":"daaa5a65.a21ac8","type":"worldmap","z":"b017b8c4.bbce28","name":"","lat":"35.62245","lon":"139.474715","zoom":"14","layer":"","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"false","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"none","showgrid":"false","allowFileDrop":"false","path":"/worldmap","overlist":"DR,CO,RA,DN,HM","maplist":"OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS,SW","mapname":"","mapurl":"","mapopt":"","mapwms":false,"x":680,"y":140,"wires":[]},{"id":"8768cdbd.20d918","type":"better-sonos-status","z":"b017b8c4.bbce28","confignode":"aab5929f.1e2fe","name":"","x":300,"y":140,"wires":[["84ab4e7d.45fa58","e469c7b0.e4b798"]]},{"id":"7bcc1549.adebec","type":"location","z":"b017b8c4.bbce28","name":"","x":90,"y":60,"wires":[["e407f8fe.285de"]]},{"id":"e407f8fe.285de","type":"delay","z":"b017b8c4.bbce28","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"10","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":true,"x":260,"y":60,"wires":[["3286777e.291538"]]},{"id":"3286777e.291538","type":"change","z":"b017b8c4.bbce28","name":"","rules":[{"t":"set","p":"lat","pt":"msg","to":"payload.location.latitude","tot":"msg"},{"t":"set","p":"lon","pt":"msg","to":"payload.location.longitude","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":60,"wires":[["ba301ca9.d8d5b8","8768cdbd.20d918"]]},{"id":"84ab4e7d.45fa58","type":"change","z":"b017b8c4.bbce28","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\t    \"lat\": msg.lat,\t    \"lon\": msg.lon,\t    \"name\": \"Now Playing.. \" & msg.payload\t}","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":140,"wires":[["daaa5a65.a21ac8","3b40e9e.b398596"]]},{"id":"3b40e9e.b398596","type":"debug","z":"b017b8c4.bbce28","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":670,"y":200,"wires":[]},{"id":"e469c7b0.e4b798","type":"debug","z":"b017b8c4.bbce28","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":450,"y":200,"wires":[]},{"id":"aab5929f.1e2fe","type":"better-sonos-config","z":"","name":"Sonos Roam","serialnum":"54-2A-1B-49-8B-9C:4","ipaddress":"192.168.3.5"}]
```

GitHubにもフローを公開しています。

https://github.com/kitazaki/flow-sample/blob/master/20220123_location_sonos_flows.json

# 地図上に表示する

![map.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/0f1c36e0-0b0d-58e3-f29c-13f4c39de7f3.jpeg)

# さいごに

車の中でもSonosで最高の音楽を聴きたいですね！
Listen Better in Car！
良き車IoTライフを！

### 参考

Sonosがカーオーディオに標準実装された事例

(引用元　2021.5.7 SonosがAudiのサウンドパートナーに)

![スクリーンショット 2022-01-24 22.55.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/018be84d-83a0-4812-ce74-15dc94c745f8.png)