Lyric App Framework:
インタラクティブな歌詞駆動型視覚表現の開発用フレームワーク
加藤 淳, 後藤 真孝
産業技術総合研究所
1. 「リリックアプリ」について

3. 実証実験

2. Lyric App Framework
TextAlive App API
https://developer.textalive.jp$ npm install textalive-app-api
import {Player} from "textalive-app-api";
new Player().createFromSongUrl("…");

2024/3/6

Lyric App Framework (インタラクション 2024)

1

1.「リリックアプリ」について
Lyric App Framework:
インタラクティブな歌詞駆動型視覚表現の開発用フレームワーク
加藤 淳, 後藤 真孝

2024/3/6

Lyric App Framework (インタラクション 2024)2

既存の歌詞駆動型視覚表現: リリックビデオ

TextAlive [ACM CHI 2015]• 歌詞が楽曲と同期してアニメーションする動画• 歌詞が持つメッセージを視覚的に印象付けられる表現手法• ただし誰がいつ見てもまったく同じ内容

静的メディアの制約を取り払いたい
2024/3/6

Lyric App Framework (インタラクション 2024)3

インタラクティブな歌詞駆動型視覚表現: リリックアプリ

TextAliveJp/textalive-app-p5js

TextAliveJp/textalive-lyric-tiles

TextAliveJp/textalive-app-dance• 歌詞などの視覚表現が、音楽に合わせてタイミングよく動き、ユーザとのインタラクションによって動的に変化する• 視覚表現はプログラマが実装するアルゴリズムで都度生成される• 2020/9/18に開発用フレームワークを公開し、世界で初めて提唱*上に示したのは当該フレームワークを用いて実装され、 GitHubでオープンソース公開されているリリックアプリ

2024/3/6

Lyric App Framework (インタラクション 2024)

4

リリックアプリの具体例
MiracleUniverse =作者: Misora Ryo
初音ミク「マジカルミライ」
10th Anniversary
プログラミング・コンテスト
最優秀賞受賞作品

https://developer.text
alive.jp/events/magic
almirai10th

2024/3/6

Lyric App Framework (インタラクション 2024)

5

2024/3/6

Lyric App Framework (インタラクション 2024)

6

2024/3/6

Lyric App Framework (インタラクション 2024)

7

2024/3/6

Lyric App Framework (インタラクション 2024)

8

リリックアプリの具体例
MiracleUniverse =作者: Misora Ryo
初音ミク「マジカルミライ」
10th Anniversary
プログラミング・コンテスト
最優秀賞受賞作品

https://developer.text
alive.jp/events/magic
almirai10th

3つの特徴:

楽曲再生と精密に同期した演出

2024/3/6

インタラクティブな視覚表現

エンドユーザ向けの大規模配信

Lyric App Framework (インタラクション 2024)

9

2. Lyric App Framework
Lyric App Framework:
インタラクティブな歌詞駆動型視覚表現の開発用フレームワーク
加藤 淳, 後藤 真孝

2024/3/6

Lyric App Framework (インタラクション 2024)

10

リリックアプリ開発の課題と我々の技術的解決
リリックアプリの3つの特徴:

楽曲再生と精密に同期した演出

インタラクティブな視覚表現

エンドユーザ向けの大規模配信

TextAlive App API
https://developer.textalive.jp$ npm install textalive-app-api
import {Player} from "textalive-app-api";
new Player().createFromSongUrl("…");Webベースの柔軟な開発ワークフロー

2024/3/6

アプリのインタラク
ションデザイン用
TextAlive App API

Webアプリとしての大規
模配信と TextAlive App
Customizer

Lyric App Framework (インタラクション 2024)

11

リリックアプリ開発の課題と我々の技術的解決
リリックアプリの3つの特徴:

楽曲再生と精密に同期した演出

インタラクティブな視覚表現

エンドユーザ向けの大規模配信

TextAlive App APIhttps://developer.textalive.jp$ npm install textalive-app-api
import {Player} from "textalive-app-api";
new Player().createFromSongUrl("…");Webベースの柔軟な開発ワークフロー

2024/3/6

アプリのインタラク
ションデザイン用
TextAlive App API

Webアプリとしての大規
模配信と TextAlive App
Customizer

Lyric App Framework (インタラクション 2024)

12

「楽曲再生と精密に同期した演出」を実現するには？
リリックビデオ

TextAlive [ACM CHI 2015]

一曲のために作り込めばよい
2024/3/6

リリックアプリ (我々の提案)[マジカルミライ2021 プログラミング・コンテスト入選作品No.3]
Voice Shooter / 作者: sakuramodki / すぱりだ / ななしお / HiroyukiIsoe / ya2ha4 / りおんぬ

同じアプリで複数曲を開ける
Lyric App Framework (インタラクション 2024)13

Webベースの開発ワークフロー
楽曲のアップロードまたは選択自動解析の結果確認と修正アプリの開発、カス
タマイズ、配信
TextAlive App API
https://developer.textalive.jp$ npm install textalive-app-api
import {Player} from "textalive-app-api";
new Player().createFromSongUrl("…");

https://textalive.jp/profile

https://songle.jp
https://editor.textalive.jp

https://textalive.jp/songs

2024/3/6

利用可能な解析結果: 歌詞タイミング、品詞、声量、音楽印象、ビート構造、コード進行、楽曲構造（サビ区間など）

Lyric App Framework (インタラクション 2024)

14

リリックアプリ開発の課題と我々の技術的解決
リリックアプリの3つの特徴:

楽曲再生と精密に同期した演出

インタラクティブな視覚表現

エンドユーザ向けの大規模配信

TextAlive App API
https://developer.textalive.jp$ npm install textalive-app-api
import {Player} from "textalive-app-api";
new Player().createFromSongUrl("…");Webベースの柔軟な開発ワークフロー

2024/3/6

アプリのインタラク
ションデザイン用
TextAlive App API

Webアプリとしての大規
模配信と TextAlive App
Customizer

Lyric App Framework (インタラクション 2024)15

「エンドユーザ向けの大規模配信」を実現するには？
• リリックビデオなら動画共有サービスにアップロードすればよい• 新たな表現形式であるリリックアプリについて、プロトタイプで終わらせず、プロダクションレディな配信を可能にしたかった• 先行する議論:• Levtov「大量消費と汎用品としての生産を可能にするアルゴリズミックミュージック」で Web 標準が最有望とされている• Klokmose「Webstrates: 共有可能な動的メディア」でも Web が採用された

本研究でもアプリをWebで配信容易にしたLevtov, Y.: Algorithmic Music for Mass Consumption and Universal Production, The Oxford Handbook of Algorithmic Music (McLean, A. and Dean, R.
T., eds.), Oxford University Press, Chapter 34, pp. 627–644 (2018).
Klokmose, C. N., Eagan, J. R., Baader, S., Mackay, W. and Beaudouin-Lafon, M.: Webstrates: Shareable Dynamic Media, In Proceedings of the 28th
Annual ACM Symposium on User Interface Software & Technology, UIST ’15, pp. 280–290 (2015).

2024/3/6

Lyric App Framework (インタラクション 2024)

16

TextAlive App Customizer• さらに配信後のアプリをカスタマイズできるCustomizerを提供• プログラマでなくとも直感的インタフェースで動作を調整できる誰もがアプリをカスタマイズして楽しめる！
2024/3/6

Lyric App Framework (インタラクション 2024)

17

リリックアプリ開発の課題と我々の技術的解決
リリックアプリの3つの特徴:

楽曲再生と精密に同期した演出

インタラクティブな視覚表現

エンドユーザ向けの大規模配信

TextAlive App API
https://developer.textalive.jp$ npm install textalive-app-api
import {Player} from "textalive-app-api";
new Player().createFromSongUrl("…");Webベースの柔軟な開発ワークフロー

2024/3/6

アプリのインタラク
ションデザイン用
TextAlive App API

Webアプリとしての大規
模配信と TextAlive App
Customizer

Lyric App Framework (インタラクション 2024)18

「インタラクティブな視覚表現」を実現するには？
視覚的なインタラクション設計ではイベント駆動型APIが一般的

音楽再生と同期した演出でもシンプルな内容なら便利OKSongle Sync [ACM Multimedia 2018]

button.addEventListener(“click”, (e) => {// ボタンをクリックされた場合の処理});player.on(“beatEnter”, (e) => {// ビートごとの処理});

イベント駆動型APIで本当によいだろうか？
2024/3/6

Lyric App Framework (インタラクション 2024)

19

リリックアプリ用の時刻駆動型API (TextAlive App API [2/2])
一般的なイベント駆動型API (onBeat, onWord, on…)を提供すると、３つの問題が生じる:
1. 未来に向けた準備のロジックが書きづらい
onPhraseEnter -0.5s

I think of you

onPhraseEnter

onPhraseLeave

I think of you

I think of you

魅力的な映像演出には予備動作がある一方で、イベントは常に事後的演出を示すものであり、不十分

2024/3/6

Lyric App Framework (インタラクション 2024)

20

リリックアプリ用の時刻駆動型API (TextAlive App API [2/2])
一般的なイベント駆動型API (onBeat, onWord, on…)を提供すると、３つの問題が生じる:
2. 複数の音楽的要素を考慮に入れたロジックが書きづらい
歌詞発声で発生しビートと同期するパーティクル

歌詞発声と連動するテキスト
I think of you

魅力的な映像演出は多様な要素を考慮するものだが、イベント(リスナ)は個別の要素しか扱えない

2024/3/6

Lyric App Framework (インタラクション 2024)

21

リリックアプリ用の時刻駆動型API (TextAlive App API [2/2])
一般的なイベント駆動型API (onBeat, onWord, on…)を提供すると、３つの問題が生じる:
3. 時間精度が保証できない
とつぜんの過負荷！

過負荷の解消後溜まったイベントが大量に降り注ぐ

2024/3/6

Lyric App Framework (インタラクション 2024)

22

リリックアプリ用の時刻駆動型API (TextAlive App API [2/2])
一般的なイベント駆動型API (onBeat, onWord, on…)を提供すると、３つの問題が生じる:
1. 未来に向けた準備のロジックが書きづらい
2. 複数の音楽的要素を考慮に入れたロジックが書きづらい
3. 時間精度が保証できない

これらの問題を解消できるAPI設計を提案
2024/3/6

Lyric App Framework (インタラクション 2024)

23

リリックアプリ用の時刻駆動型API (TextAlive App API [2/2])
本研究で提案するAPI: 時刻駆動型API

let beat = player.findBeat( t /* 任意の再生時刻 [ms] */ );// プログラマが好きなタイミングで何度でも呼び出せる

イベント駆動型APIの３つの問題をすべて解消できる:
1. 未来の準備がシンプルに記述できる: findBeat(t + 5000)
2. 複数の音楽的要素を考慮しやすい: findBeat(t); findWord(t); find...
3. 常に最新情報を画面に表示でき、時間精度が保証される*API設計の詳細と、ユーザ評価により発見した時区間駆動型APIについては論文を参照のこと

2024/3/6

Lyric App Framework (インタラクション 2024)

24

リリックアプリ開発の課題と我々の技術的解決
リリックアプリの3つの特徴:

楽曲再生と精密に同期した演出

インタラクティブな視覚表現

エンドユーザ向けの大規模配信

TextAlive App API
https://developer.textalive.jp$ npm install textalive-app-api
import {Player} from "textalive-app-api";
new Player().createFromSongUrl("…");Webベースの柔軟な開発ワークフロー

アプリのインタラク
ションデザイン用
TextAlive App API

Webアプリとしての大規
模配信と TextAlive App
Customizer

Lyric App Framework
2024/3/6

Lyric App Framework (インタラクション 2024)25

3. 実証実験
Lyric App Framework:
インタラクティブな歌詞駆動型視覚表現の開発用フレームワーク
加藤 淳, 後藤 真孝

2024/3/6

Lyric App Framework (インタラクション 2024)26

初音ミク「マジカルミライ」プログラミング・コンテスト• Lyric App Frameworkを用いリリックアプリを開発するコンテスト• プログラミングの力で創作文化に参加できる機会として、2020年よりクリプトン・フューチャー・メディア株式会社が主催• 論文では2020～2021年の作品を分析したが、以降も継続している
2020 (分析対象)

初音ミク「マジカルミライ 2020」プロ
グラミング・コンテスト (9/18-11/3)

mmmapper / 作者: nolze

2024/3/6

2021 (分析対象)

歌って頂いた。 / 作者: minatty(2020年 優秀賞)

Lyric Trail / 作者: catLee

光粒子とコトバの海/ 作者:Kaku

初音ミク「マジカルミライ 2021」プログ
ラミング・コンテスト (7/16-9/30)

配置 de PV / 作者: upc1712

2022

キミを探す、夏/ 作者:うたろ(2021年 最優秀賞)

Voice Shooter / 作者:
sakuramodoki 他

TouchLyricWorld / 作者:
huskyB4ll

初音ミク「マジカルミライ」10th Anniv.
プログラミング・コンテスト(4/15-7/21)

エモーショナライザー/ 作
者:しろねぎMiracle Universe = / 作者: Misora Ryo(2022年 最優秀賞)

MemoryZone / 作者: Team
MOROMEN

MulticoloredLyrics / 作者:
mikandaisuki

Lyric App Framework (インタラクション 2024)27

初音ミク「マジカルミライ2023」
プログラミング・コンテスト: 入選10作品

過去4年間の入選作品すべて、実際にWeb上で試せます！
マジカルミライ2023 プログラミング・コンテスト入選10作品:

https://magicalmirai.com/2023/procon/entry.html

2024/3/6

Lyric App Framework (インタラクション 2024)

28

プログラミング・コンテストでの実証実験• リリックアプリという新たな表現形式の特徴について理解を深めるため、アプリ開発を支援する Lyric App Framework を一般公開• 2020～2021年のプロコン応募52作品を分析して8カテゴリを発見

拡張現実アプリゲーム

2024/3/6

制作ツール

創造的即興アプリ

楽器アプリ

拡張音楽動画

インタラクティブ
リリックビデオ

ジェネラティブ
リリックビデオ

Lyric App Framework (インタラクション 2024)

29

リリックアプリのカテゴリ例①

拡張現実アプリ2024/3/6

Lyric App Framework (インタラクション 2024)

30

2024/3/6

Lyric App Framework (インタラクション 2024)

312024/3/6

Lyric App Framework (インタラクション 2024)

32

リリックアプリのカテゴリ例②

制作ツール

2024/3/6

Lyric App Framework (インタラクション 2024)

33

2024/3/6

Lyric App Framework (インタラクション 2024)

34

リリックアプリのカテゴリ例③

インタラクティブ
リリックビデオ

2024/3/6

Lyric App Framework (インタラクション 2024)

35

2024/3/6

Lyric App Framework (インタラクション 2024)36

議論: 歌詞表現と技術の進化

123

1. レコードやCDにはグラフィックデザイナの手による歌詞カード
2. 動画共有サービス一般化後は動画制作者によるリリックビデオ
3. インタラクティブな歌詞駆動メディアのリリックアプリ

楽曲と同時にリリックアプリを配信する時代
2024/3/6

Lyric App Framework (インタラクション 2024)37

議論: 静的メディアへのインタラクティビティ付与• 既存メディアの周りには文化・コミュニティがあり、それに触発されるかたちで、プログラミングに関する創造性が花開いた• コミュニティとともに創造的文化の未来を作りながら検証する「在野 (in the wild)」の研究アプローチは今後ますます重要になる

2024/3/6

Lyric App Framework (インタラクション 2024)

38

Lyric App Framework:

本日のデモ発表 [1B23] では、お手持ちのデバイスでリリックアプリを試せます！

インタラクティブな歌詞駆動型視覚表現の開発用フレームワーク

APIリファレンス・チュート
リアル・サンプルコードは

加藤 淳, 後藤 真孝

https://developer.textalive.jpで公開中!!

産業技術総合研究所

1. 「リリックアプリ」について

3. 実証実験

2. Lyric App Framework
TextAlive App API
https://developer.textalive.jp$ npm install textalive-app-api
import {Player} from "textalive-app-api";
new Player().createFromSongUrl("…");

2024/3/6

Lyric App Framework (インタラクション 2024)

39

Appendix

2024/3/6

Lyric App Framework (インタラクション 2024)

40

リリックアプリのカテゴリと応募・入選作品数
2020

2021

2022 入選

2023 入選

計

6

30

1

10

4

200

6

2

4

10

7

楽器アプリ (instrument)

120

1

4

ゲーム (game)

2

42

4

12

1

100

25044131143018

3220

101072

拡張現実アプリ(extended reality)

制作ツール(authoring tool)

創造的即興アプリ(creative application)

拡張音楽動画(augmented music video)

インタラクティブリリックビデオ(interactive lyric video)

ジェネラティブリリックビデオ(generative lyric video)

計

2024/3/6

Lyric App Framework (インタラクション 2024)41

2020-2021年のプログラミング・コンテストを振り返って

2021

2020

8カテゴリを明らかにした:

2024/3/6

Lyric App Framework (インタラクション 2024)

422022-2023年のプログラミング・コンテストを振り返って

2023

2022

8カテゴリほぼすべての応募があり、カテゴリの理解が深まった:

2024/3/6

Lyric App Framework (インタラクション 2024)

43