はじめに
前回、TextAliveのサンプルコードを動かすための記事を投稿しました。あれからフロントエンドをちょこっと勉強して、なんとか楽曲のパラメータを取得出来るようになりました！やっとスタートラインですね(; ･`д･´)。という訳で今回は、そのプログラムを公開したいと思います。
この記事の対象者
- JavaScriptが読める人
- TextAliveAppAPIを動作する環境があり、コードが編集できる人
- チュートリアルを実践中で、パラメータがうまく取得できない人
- マジカルミライを一緒に盛り上げたい人
前回も言いましたが、私の動作環境はWindows10です。注意してください。
また、TextAlive App API 1.開発の進め方とtextalive-app-apiを見れば、より正しい情報でコーディングできます。今回公開するソースコードでは、チュートリアルで書いてあることを実践するだけのものとなっています。
この記事で得られること
- 各種パラメータを取得できるソースコードを見れる
結果の様子
実行すると以下のように、リアルタイムでパラメータが表示されます。TextAliveすごいですね！(´▽｀)。
ちなみに、私でも理解できそうな関数しか使っていません。是非、もっと知りたい人はリファレンスを見てください！。あと、ダサいのは見逃してやってください( 一一)。
取得するパラメータ
以下に、楽曲から取得しているパラメータの一覧を記載しておきます。
| パラメータ@対象の行 | 備考 |
|---|---|
| 楽曲名 | 楽曲名 |
| アーティスト名 | アーティスト名 |
| リンク | 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
躓いた事
コーディングするにあたり、躓いた事をメモしておきます。ほとんど私自身のために書きますので、参考程度によろしくお願いします。
イベントリスナーの登録と定義
player.addListenerで追加した関数は、必ず定義しなければならない。定義しなくてもエラーは出ないが、textAliveが起動しない。
更新関数について
onThrottledTimeUpdate(position)がうまく使えず、onTimeUpdate(position)を使用した。onThrottledTimeUpdateを使用した場合、positionがリアルタイムで反応してくれなかった。本来は、onTimeUpdateを避けるべき？
サビ情報の取得
どうやる分からん。。。TextAlive App API 2.楽曲情報の活用を見る限り、サビ候補の情報が得られるっぽい。が、分からん。
※2021/08/14追記
どうやら、onVideoReadyのタイミングで、曲全体のサビ情報が一括取得できるようです。各繰り返し区間（segments）の、サビかどうか（boolean）・区間時間幅（number）、が取得できます。segmentsはarray型なので注意してください。githubのコードにも追加しておきました。
@GunseiKPaseriさん、とても参考になりました。ありがとうございます。
参考
・【TextAliveAppAPI】Segments（サビ・繰り返し区間）の概念
・Interface IRepetitiveSegments
V/A空間を取得するときの時間間隔
TextAliveAppAPIでは、V/A空間を計算してくれます。この空間は、V(快ー不快)軸とA(活性ー不活性)の二軸で成り立っており、楽曲に対する感情を表す指標でもあります。すごいですね。
なのですが、細かい時間間隔で取得できるものでもない様子でした。一定時間幅の楽曲を処理しているのでしょうか？
おわりに
TextAliveAppAPIで出来ることがなんとなく分かってきました！これからが本番ですね。どんなアイデアを形にするか、とてもワクワクしています！
この記事を読んだ皆さんも、是非マジカルミライ2021プロコンに参加しましょう！それでは！