TextAlive App API:
「リリックアプリ」の提案とプログラミング・コンテストでの実証実験
加藤 淳, 後藤 真孝
産業技術総合研究所
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("…");

2023/8/27

TextAlive App API (SIGMUS 138)1

1.「リリックアプリ」とはTextAlive App API:「リリックアプリ」の提案とプログラミング・コンテストでの実証実験
加藤 淳, 後藤 真孝

2023/8/27

TextAlive App API (SIGMUS 138)

2

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

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

静的メディアの制約を取り払いたい
2023/8/27

TextAlive App API (SIGMUS 138)3

リリックアプリとは？

TextAliveJp/textalive-app-p5js

2020/9/18 API公開

TextAliveJp/textalive-lyric-tiles

TextAliveJp/textalive-app-dance• 歌詞駆動型のインタラクティブな視覚表現（世界で初めて我々が提唱）• 歌詞などの視覚表現が、音楽に合わせてタイミングよく動き、ユーザとのインタラクションによって動的に変化する• 視覚表現はプログラマが実装するアルゴリズムで都度生成される*上に示したのは我々が提案する TextAlive App API で実装され、 GitHubでオープンソース公開されているリリックアプリ

2023/8/27

TextAlive App API (SIGMUS 138)4

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

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

2023/8/27

TextAlive App API (SIGMUS 138)5

2023/8/27

TextAlive App API (SIGMUS 138)6

2023/8/27

TextAlive App API (SIGMUS 138)7

2023/8/27

TextAlive App API (SIGMUS 138)8

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

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

3つの特徴:

音楽再生と精確に同期した演出

2023/8/27

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

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

TextAlive App API (SIGMUS 138)

9

2. Lyric App Framework
TextAlive App API:「リリックアプリ」の提案とプログラミング・コンテストでの実証実験
加藤 淳, 後藤 真孝

2023/8/27

TextAlive App API (SIGMUS 138)10

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

音楽再生と精確に同期した演出

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

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

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

2023/8/27

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

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

TextAlive App API (SIGMUS 138)11

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

音楽再生と精確に同期した演出

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

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

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

2023/8/27

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

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

TextAlive App API (SIGMUS 138)

12

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

TextAlive [ACM CHI 2015]

一曲のために作り込めばよい
2023/8/27

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

同じアプリで複数曲を開ける
TextAlive App API (SIGMUS 138)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

2023/8/27

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

TextAlive App API (SIGMUS 138)14

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

音楽再生と精確に同期した演出インタラクティブな視覚表現

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

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

2023/8/27

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

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

TextAlive App API (SIGMUS 138)

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).

2023/8/27

TextAlive App API (SIGMUS 138)

16

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

TextAlive App API (SIGMUS 138)17

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

音楽再生と精確に同期した演出

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

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

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

2023/8/27

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

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

TextAlive App API (SIGMUS 138)

18

「インタラクティブな視覚表現」を実現するには？
視覚的なインタラクション設計ではイベント駆動型APIが一般的音楽再生と同期した演出でもシンプルな内容なら便利

OKSongle Sync [ACM Multimedia 2018]

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

イベント駆動型APIで本当によいだろうか？
2023/8/27

TextAlive App API (SIGMUS 138)19

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

2023/8/27

TextAlive App API (SIGMUS 138)20

リリックアプリ用の時刻駆動型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

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

2023/8/27

TextAlive App API (SIGMUS 138)21

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

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

TextAlive App API (SIGMUS 138)22

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

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

2023/8/27

TextAlive App API (SIGMUS 138)23

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

これらの問題を解消できるAPI設計を提案
2023/8/27

TextAlive App API (SIGMUS 138)24

リリックアプリ用の時刻駆動型API (TextAlive App API [2/2])
本研究で提案するAPI: 時刻駆動型API
let beat = player.findBeat(player.timer.position /* 任意の再生時刻 [ms] */);// プログラマが好きなタイミングで何度でも呼び出せる
イベント駆動型APIの３つの問題をすべて解消できる:
1. 未来の準備がシンプルに記述できる: findBeat(p + 5000)
2. 複数の音楽的要素を考慮しやすい: findBeat(p); findWord(p); find...
3. 常に最新情報を画面に表示でき、時間精度が保証される*API設計の詳細と、ユーザ評価により発見した時区間駆動型APIについては論文を参照のこと

2023/8/27

TextAlive App API (SIGMUS 138)25

リリックアプリ用の時刻駆動型API (TextAlive App API [2/2])
時刻駆動型API (findBeat, findWord, find…) で常に最新情報を画面表示でき、時間精度が保証される理由:
各種グラフィックAPIの画面描画用関数内で自由に呼び出せるため*API設計の詳細と、ユーザ評価により発見した時区間駆動型APIについては論文を参照のこと

2023/8/27

TextAlive App API (SIGMUS 138)26

リリックアプリ開発の課題と我々の技術的解決
リリックアプリの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
2023/8/27

TextAlive App API (SIGMUS 138)27

3. 実証実験
TextAlive App API:「リリックアプリ」の提案とプログラミング・コンテストでの実証実験
加藤 淳, 後藤 真孝

2023/8/27

TextAlive App API (SIGMUS 138)28

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

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

mmmapper / 作者: nolze

2023/8/27

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

TextAlive App API (SIGMUS 138)

29

プログラミング・コンテスト: 入選10作品

全作品、実際にWeb上で試せます！

受賞作品が5日後に発表されます‼

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

プログラミング・コンテスト受賞作品発表会 / TextAlive講座(昨年までの作品も試せます)2023/8/27

9月1日(金)16:00-

TextAlive App API (SIGMUS 138)幕張メッセ 国際展示場10-11ホール

30

プログラミング・コンテストでの実証実験• リリックアプリという新たな表現形式のデザイン空間を明らかにするため、アプリ開発を支援する TextAlive App API を一般公開• 2020～2021年のプロコン応募52作品を分析して8カテゴリを発見

拡張現実アプリゲーム

2023/8/27

制作ツール

創造的即興アプリ

楽器アプリ

拡張音楽動画

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

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

TextAlive App API (SIGMUS 138)31

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

拡張現実アプリ2023/8/27

TextAlive App API (SIGMUS 138)32

2023/8/27

TextAlive App API (SIGMUS 138)33

2023/8/27

TextAlive App API (SIGMUS 138)34

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

制作ツール

2023/8/27

TextAlive App API (SIGMUS 138)35

2023/8/27

TextAlive App API (SIGMUS 138)36

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

拡張音楽動画

2023/8/27

TextAlive App API (SIGMUS 138)37

2023/8/27

TextAlive App API (SIGMUS 138)38

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

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

2023/8/27

TextAlive App API (SIGMUS 138)39

2023/8/27

TextAlive App API (SIGMUS 138)40

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

1

2

3

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

楽曲と同時にリリックアプリを配信する時代
2023/8/27

TextAlive App API (SIGMUS 138)

41

TextAlive App API:
「リリックアプリ」の提案とプログラミング・コンテストでの実証実験
加藤 淳, 後藤 真孝

DOI:10.1145/3544548.3580931
APIリファレンス・チュート
リアル・サンプルコードはhttps://developer.textalive.jp
で公開中─お試しください！

産業技術総合研究所

1. 「リリックアプリ」とは本研究の英語論文は ACM CHI
2023 に採録され、 Honorable
Mention Award を受賞！

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("…");

2023/8/27

TextAlive App API (SIGMUS 138)

42