Songle Syncとmicro:bitで曲に合わせてLEDを光らせる

micro:bit, Node.js

この記事は最終更新日から1年以上が経過しています。

先日開催されたMUSIC HACK DAY 2018に参加したのですが、
思いついたアイデアとマッチせずSongle Syncを利用できなかったため、個人的に触ってみました。

Songleの説明とSongle Syncについては以下の公式をご覧ください。

Songle SyncのAPIキーを作成

まず、Songle Syncを利用するためにAPI利用登録からアカウントを作成しアクセストークンとシークレットを取得します。

Songle Syncのmasterを作成

次に、ブラウザ向けSongle Syncのソースをcloneして先ほど取得したアクセストークンとシークレットを設定します。
また、Songleで解析済みの曲を選択するか自分で好きな曲をSongleに解析してもらう（※ログインが必要です）ことで使用する曲を変更できます。
起動したらブラウザで表示します。

Songle Syncのslaveを作成

Node.jsのプロジェクトを作成して songle-widget をインストールします。
npm init
npm install --save songle-widget

slaveの実装はSongle公式のサンプルを参考にします。

slaveをmicro:bitに接続

Bluetoothでmicro:bitと通信するこちらのモジュールを利用します。
npm install --save bbc-microbit

API仕様を参考に実装します。
以下コメントにて解説。
var BBCMicrobit = require('bbc-microbit');
 
// Songle Syncの初期化
var SW = require('songle-widget');
var player = new SW.Player({
  accessToken: '＜YOUR_ACCESS_TOKEN＞'
});
player.addPlugin(new SW.Plugin.SongleSync());
// 必要に応じてプラグインを追加する
player.addPlugin(new SW.Plugin.Beat());
 
// beat用のLED表示パターンを複数用意する
// micro:bitは5x5になっているので16進数で00〜1Fを使用
var PATTERNS = [
  new Buffer('1F00000000', 'hex'),
  new Buffer('001F000000', 'hex'),
  new Buffer('00001F0000', 'hex'),
  new Buffer('0000001F00', 'hex'),
  new Buffer('000000001F', 'hex'),
]
 
// micro:bitを探す
// discoverだと1台しか接続できないのでここではdiscoverAllを使用
BBCMicrobit.discoverAll(function(microbit) {
 
  // masterでの再生終了イベント
  player.on("finish", function (ev) {
    // ここではmicro:bitとの接続を解除する
    microbit.disconnect();
  });
 
  // beat(1小節の中のn拍)毎に発生するイベント
  player.on("beatEnter", function (ev) {
    // ev.data.beat.positionに1,2,3,4..などの拍の位置が入ってくる
    microbit.writeLedMatrixState(PATTERNS[ev.data.beat.position], function() {});
  });
 
});

これだけで、beatに合わせてLEDの表示を変える演出を複数のmicro:bitで同期させながら行うことができます。
また、以下のようにすることでサビの間だけ表示を変えるような処理を実装できます。
let is_chorus = false;
player.addPlugin(new SW.Plugin.Chorus());
 
〜〜(省略)〜〜
 
player.on("chorusSectionEnter", function (ev) {
  // サビが始まった
  is_chorus = true;
});
 
player.on("chorusSectionLeave", function (ev) {
  // サビが終わった
  is_chorus = false;
});

感想

Songle Sync(master/slave) -> bluetooth -> micro:bitの構成だったのですが、masterで再生する動画とmicro:bitのLED表示のズレがほぼ気にならないレベルで同期できていて完成度が高かったです。
また、songle-widgetはイベントに応じて処理を書くだけなので拍やサビのタイミングで表示を変えるようなコードを簡単に追加できて、すぐに品質の高いデモが作れて色々と応用してみたくなる面白いサービスだと思いました。

micro:bit, Node.js