【TextAliveAppAPI】楽曲のパラメータを取得するプログラム【マジカルミライ2021プロコン】

# はじめに
　前回、TextAliveのサンプルコードを動かすための記事を投稿しました。あれからフロントエンドをちょこっと勉強して、なんとか楽曲のパラメータを取得出来るようになりました！やっとスタートラインですね(; ･`д･´)。という訳で今回は、そのプログラムを公開したいと思います。

# この記事の対象者

* JavaScriptが読める人
* TextAliveAppAPIを動作する環境があり、コードが編集できる人
* [チュートリアル](https://developer.textalive.jp/app/)を実践中で、パラメータがうまく取得できない人
* <font color="red">マジカルミライを一緒に盛り上げたい人</font>

　前回も言いましたが、私の動作環境はWindows10です。注意してください。

　また、[TextAlive App API 1.開発の進め方](https://developer.textalive.jp/app/)と[textalive-app-api](https://developer.textalive.jp/packages/textalive-app-api/)を見れば、より正しい情報でコーディングできます。今回公開するソースコードでは、チュートリアルで書いてあることを実践するだけのものとなっています。

# この記事で得られること

* 各種パラメータを取得できるソースコードを見れる

# 結果の様子
　実行すると以下のように、リアルタイムでパラメータが表示されます。TextAliveすごいですね！(*´▽｀*)。
　ちなみに、私でも理解できそうな関数しか使っていません。是非、もっと知りたい人はリファレンスを見てください！。あと、ダサいのは見逃してやってください( 一一)。

![result_movie.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554112/4e3cca25-7226-fcde-8124-c90818566e13.gif)

# 取得するパラメータ
　以下に、楽曲から取得しているパラメータの一覧を記載しておきます。

|  パラメータ@対象の行  | 備考  |
| ---- | ---- |
|  楽曲名  |  楽曲名  |
|  アーティスト名  |  アーティスト名  |
|  リンク  |  YouTube上の動画リンク  |
|  フレーズのアニメーション  |  パラメータではない。HTMLに出力するアニメーション関数をセットした（表示するのみの関数）。  |
|  単語のアニメーション  |  フレーズのアニメーションに同じく  |
|  文字のアニメーション  |  フレーズのアニメーションに同じく  |
|  現在の位置  |  再生している動画の時間位置（ミリセカンド）  |
|  ビートの情報：index   |  現在のビートの通し番号  |
|  ビートの情報：duration   |  現在のビートの持続時間（ミリセカンド）  |
|  コード進行の情報：index  |  現在のコード進行の通し番号  |
|  コード進行の情報：duration  |  現在のコード進行の持続時間（ミリセカンド）  |
|  コーラスの情報：index |  現在のコーラスの通し番号  |
|  コーラスの情報：duration  |  現在のコーラスの持続時間（ミリセカンド）  |
|  楽曲のV/A空間：V |  現在のV/A空間のV軸。怪ー不快を示す。0～1で表される。ある程度の時間幅で計算される。  |
|  楽曲のV/A空間：A |  現在のV/A空間のA軸。活性ー不活性を示す。0～1で表される。ある程度の時間幅で計算される。  |
|  声量の情報  |  声量の情報  |
|  フレーズの情報  |  現在の位置のフレーズ。フレーズのアニメーションとは異なる（現在位置にあるフレーズを随時取得している）。  |
|  単語の情報 |  現在の位置の単語。フレーズの情報に同じく。  |
|  文字の情報 |  現在の位置の文字。フレーズの情報に同じく。  |
|  サビ情報（songMap） | 各繰り返し区間の情報、サビかどうか（区間幅の時間）。 |

# 公開するソースコード
　お粗末なものですが、githubにソースコードを公開しておきます。ご自身の環境で実行するときは、あなたの開発者用トークンに書き換えてください。以下のページでは、取得しているパラメータの一覧も記載しています。
　私が勝手に作ったものなので、自己責任でお好きに使ってください。それと、これ以上ソースコードを変更する予定はありませんので注意してください。
　TextAliveAppAPIを使いこなす第一歩として、使ってくれたら幸いです。

・[mimuro-lab/textAlive_showParameter](https://github.com/mimuro-lab/textAlive_showParameter)

# 躓いた事
　コーディングするにあたり、躓いた事をメモしておきます。ほとんど私自身のために書きますので、参考程度によろしくお願いします。

## イベントリスナーの登録と定義
　player.addListenerで追加した関数は、必ず定義しなければならない。定義しなくてもエラーは出ないが、textAliveが起動しない。

## 更新関数について
　onThrottledTimeUpdate(position)がうまく使えず、onTimeUpdate(position)を使用した。onThrottledTimeUpdateを使用した場合、positionがリアルタイムで反応してくれなかった。本来は、onTimeUpdateを避けるべき？

## サビ情報の取得
　
どうやる分からん。。。[TextAlive App API 2.楽曲情報の活用](https://developer.textalive.jp/app/song/)を見る限り、サビ候補の情報が得られるっぽい。が、分からん。


※2021/08/14追記
　どうやら、onVideoReadyのタイミングで、曲全体のサビ情報が一括取得できるようです。各繰り返し区間（segments）の、サビかどうか（boolean）・区間時間幅（number）、が取得できます。segmentsはarray型なので注意してください。githubのコードにも追加しておきました。
　@GunseiKPaseriさん、とても参考になりました。ありがとうございます。

参考
・[【TextAliveAppAPI】Segments（サビ・繰り返し区間）の概念](https://qiita.com/GunseiKPaseri/items/3caa86ead1351ffe5aeb)
・[Interface IRepetitiveSegments](https://developer.textalive.jp/packages/textalive-app-api/interfaces/irepetitivesegments.html)

## V/A空間を取得するときの時間間隔
 　TextAliveAppAPIでは、V/A空間を計算してくれます。この空間は、V(快ー不快)軸とA(活性ー不活性)の二軸で成り立っており、楽曲に対する感情を表す指標でもあります。すごいですね。
　なのですが、細かい時間間隔で取得できるものでもない様子でした。一定時間幅の楽曲を処理しているのでしょうか？

# おわりに
　TextAliveAppAPIで出来ることがなんとなく分かってきました！これからが本番ですね。どんなアイデアを形にするか、とてもワクワクしています！
　この記事を読んだ皆さんも、是非マジカルミライ2021プロコンに参加しましょう！それでは！