LoginSignup
4
2

More than 3 years have passed since last update.

Songle Syncで音楽とLINEメッセージを同期しつつシンセサイザーで自動伴奏する

Last updated at Posted at 2019-07-31

はじめに

Songle Syncを使って色々なものを音楽と同期させてみました。

Songle Syncとは?

http://api.songle.jp/sync
産総研が開発した、能動的音楽鑑賞サービスSongle(ソングル)で使われている技術を利用したAPI。
楽曲を自動解析した情報をもとに、楽曲再生に合わせて様々なイベント(リズム、コード、サビinなど)を発生させる。
これを利用して、複数のデバイスを楽曲再生に合わせて制御することができる。

今回注目したのは「コード(Chord)」。
Songle Syncは、曲に合わせてChord Changeのイベントを発生させてくれます。
これをうまく利用すれば、自動伴奏をつけることもできますね。

同期したもの

  • LINEメッセージ(LINE Things 自動通信機能)
  • シンセサイザーによる自動伴奏

デモ

概念図

しくみ

Master

音楽を再生します。
Masterの画面に設置したボタンで動画の再生開始や停止を行います。
各Slaveは、Masterの再生に合わせてイベントを受け取ることができます。

ソースコード

Songle Sync ブラウザ向けプロジェクトを元に、masterに必要な機能以外を削除して実装しました。

Slave(LINEメッセージ)

使用したもの

  • Obniz
  • LINE Things 自動通信機能

概要

ObnizをLINE Thingsデバイス化し、スマートフォンにBLE接続します。
ObnizはSongle SyncからChordイベントを受け取り、LINE Things自動通信機能を利用してコードが変わったことをLINEメッセージで通知します。

LINE Thingsでやる必要がないと思いますよね?
実はLINE Things 自動通信機能は、見た目はLINE Botのプッシュメッセージですが、内部的にはリプライメッセージとして扱われます。
つまり、プッシュメッセージ(1000件/月まで無料)の制限を気にせず、リプライメッセージ(何件でも無料)として一方通行のメッセージを送り続けることができます。
本来意図された用途から外れた、ある意味悪用とも言える使い方です。
参考: さおりからのLINEがヤバイ

工夫したところ

LINE Things自動通信機能では、デバイスがnotifyを送信してからメッセージが届くまでラグがあり、そのままではChord Changeからメッセージが届くまで間隔が空いてしまいます。
Songle Syncでは、イベント発生時刻にoffsetをつけることができるので、マイナスのoffsetをつけることで、音楽再生に先駆けてnotifyを送信しています。

viz.js
player.addPlugin(new SW.Plugin.Chord({ offset: -1800 }));

ソースコード

Slave(自動伴奏)

使用したもの

概要

Songle Syncから受け取ったChord情報をもとに、Web MIDI APIでMIDI信号を送信し、シンセサイザーを鳴らします。
Songle Syncは、C, CmなどのChord nameを教えてくれますが、このままでは構成音が分からないためMIDI信号に変換できません。
そこで、Chord nameを単音に分解するライブラリChord-Translatorを利用し、C -> [C, E, G]といった具合に構成音に分解しています

デモ動画では、MIDI信号をもとにストリングス(Octave Strings)の音色を鳴らしています。

工夫したところ

Chord-Translatorはnpmライブラリで、一方Web MIDI APIはブラウザ上で動作します。
Chord-Translatorをブラウザ上で動作させるために、Webpackを利用してビルドしています。
参考: ブラウザでnpmモジュールを使いたい

今後の展望

  • デモ動画ではまだまだラグを感じる。Offsetを調整し、より厳密に同期させる。
  • 同期させるものをさらに増やす。例えば楽曲再生に合わせてテープLEDを光らせれば、視覚的にもインパクトのあるものができる。
4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2