音楽に合わせ歌詞が動く動画を容易に制作・共有できるサービスを公開

ポイント

• ウェブ上の楽曲と歌詞を用いて、歌詞がタイミングよく動く動画の演出・制作・共有を実現。
• 音楽理解技術で得た発声タイミングやサビなどの情報を活かして、好みの演出を容易に表現。
• プログラミング環境技術により、ユーザー自身が演出や編集インタフェースを開発可能。

＜開発の社会的背景＞

楽曲・動画共有サービスの普及に伴い、楽曲や、楽曲に合わせた動画を公開して楽しむユーザーが増えている。とくに、歌詞がタイミングよく動く歌詞アニメーションは、歌詞を動画として魅力的に表現できる手法である。一方で、その制作には、手元のパソコンに動画制作ツールをインストールして、使い方を習得しなければならない。また、作品を制作するたびに、楽曲に合わせて文字ごとの動きを指定するなど相当の手間がかかる。歌詞アニメーションを制作したことがない人々が好みの楽曲に合わせた作品を制作して楽しむには、技術的な敷居が高いのが現状である。

＜研究の経緯＞

産総研では、音楽理解技術に基づき、ユーザーがより深く音楽を理解して楽しむことのできる、能動的な音楽鑑賞支援に取り組んできた。これまでに、ウェブ上の楽曲の中身を可視化する能動的音楽鑑賞サービス「Ｓｏｎｇｌｅ（ソングル）^注６）」（http://songle.jp）や、楽曲間相互の関係性を可視化する音楽視聴支援サービス「Ｓｏｎｇｒｉｕｍ（ソングリウム）^注７）」（http://songrium.jp）を開発し、一般に公開してきた（２０１２年８月２９日、２０１３年８月２７日　産総研・ＪＳＴ共同プレス発表）。

これらの研究開発を通じ、能動的に音楽関連コンテンツと関わることへの人々の関心の高さが分かってきた。そこで、楽曲の重要な構成要素である歌詞を視覚的に伝える表現手段としての歌詞アニメーションに着目し、ウェブ上で歌詞アニメーションを演出・制作・共有できるシステム開発に着手し、２０１４年１１月に研究者向けにベータ版^注８）を試験公開した。今回、ウェブブラウザ上での操作性を大幅に向上させ、歌詞アニメーションのスタイルを選んで動画全体の演出を瞬時に変更できる機能や、外部ウェブサイトへの文字アニメーション埋め込みを可能とするウェブＡＰＩ^注９）が完成したので、実証実験のためにサービスの一般公開を開始することとした。

この研究はＪＳＴ ＣＲＥＳＴ「共生社会に向けた人間調和型情報技術の構築」研究領域における研究課題「コンテンツ共生社会のための類似度を可知化する情報環境の実現（研究代表者：後藤 真孝）」の一環として行われた。

＜研究の内容＞

ウェブ上の楽曲・歌詞コンテンツを用いた歌詞アニメーションを演出・制作・共有できるシステムを開発し、歌詞アニメーション制作支援サービス「ＴｅｘｔＡｌｉｖｅ（テキストアライブ）」（http://textalive.jp）として一般公開する。ＴｅｘｔＡｌｉｖｅは、以下の仕組みで動作する（図１）。

• １．ユーザーがウェブサイト上で公開されている任意の楽曲（ＭＰ３形式の音響信号ファイルや楽曲・動画共有サービス上の楽曲・動画）と歌詞のＵＲＬをＴｅｘｔＡｌｉｖｅに登録すると、ＴｅｘｔＡｌｉｖｅが楽曲の内容と、楽曲と歌詞の対応関係を解析する。
• ２．ユーザーがＴｅｘｔＡｌｉｖｅに登録された楽曲を選ぶと、元のウェブサイト上にある楽曲がストリーミング再生されるとともに、歌詞アニメーションが同期して描画され、目と耳の両方で楽曲とその歌詞を楽しむことができる。動画全体にわたる演出をさまざまな「スタイル」から選んで瞬時に切り替えることができ、好みの歌詞アニメーションを容易に制作できる。
• ３．ユーザーはフレーズ・単語・文字ごとの詳細な演出を「テンプレート」から選んで編集でき、自分好みに演出をアレンジしてウェブ上で歌詞アニメーションを共有できる。また、他のユーザーは、共有された歌詞アニメーションに対し、さらに編集を加えて派生作品を制作できる。
• ４．プログラミング技術を持つユーザーは、「テンプレート」「テンプレートの調整用インタフェース」を編集したり、新たに作成したりできる。これらの内容はＴｅｘｔＡｌｉｖｅ上で共有されるため、すべてのユーザーの演出力が強化される。

ＴｅｘｔＡｌｉｖｅは、以下の３つの特長を持つ。

１．ウェブ上の楽曲と歌詞の情報に基づいて歌詞アニメーションを容易に制作可能

ユーザーが楽曲と歌詞が掲載されているウェブページのＵＲＬをＴｅｘｔＡｌｉｖｅに入力すると、歌詞が楽曲に合わせて動く歌詞アニメーションを視聴できる。歌詞アニメーションは、産総研独自の音楽理解技術により楽曲と歌詞から解析した歌詞発声タイミング^注１０）などの情報に基づき、ユーザーのブラウザ上で自動的に合成される（図２）。

ユーザーはブラウザ上で「スタイル」を選んで動画全体にわたる演出を瞬時に変更でき、好みの歌詞アニメーションを制作できる。また、フレーズ・単語・文字ごとの演出を「テンプレート」から選び、調整して、より詳細な演出を行うこともできる。これは、歌詞発声タイミングから歌詞アニメーションを合成するプログラム（スタイル）や、文字の変形・移動などを制御するプログラム（テンプレート）をブラウザ上で実行・更新できる、産総研が新たに開発したプログラミング環境技術により実現している。

このように、音楽理解技術による解析結果をプログラミング環境技術で利用することにより、歌詞アニメーションを制作したことがないユーザーでも、楽曲に合わせた歌詞アニメーションをすぐに好みの演出で制作して楽しむことができる。

２．直感的なインタフェースと派生作品を作りやすい仕組みで人々の創造性を支援

ＴｅｘｔＡｌｉｖｅは、歌詞アニメーションを容易に制作できる３つの編集用インタフェースを提供している。これにより、動画制作の経験がないユーザーでも、自分好みの歌詞アニメーションを制作できる。選んだスタイルに基づき自動的に生成された歌詞アニメーションを叩き台にして編集することもできるため、制作経験者であっても手間が大幅に軽減される（図３）。

• （ａ）スタイル選択パネル：スタイルを選ぶシンプルなインタフェースにより、歌詞アニメーション全体の演出を瞬時に変更でき、好みの歌詞アニメーションを制作できる。
• （ｂ）タイムライン：ユーザーがマウス操作でタイムラインカーソルを左右に動かすことで、見たい箇所の歌詞を簡単に探しだせる。また、自動解析された歌詞発声タイミングをフレーズ・単語・文字別に着色した区間として表示しており、ユーザーが各区間を左右に動かしたり伸縮したりすることで、任意の文字群や一文字ごとに歌詞発声タイミングを編集し、自動解析結果の誤りを訂正できる。
• （ｃ）編集パネル：歌詞アニメーションを視聴中に編集ボタンをクリックすると表示される。タイムラインで選択したフレーズ・単語・文字のフォントの種類・大きさ・動きを豊富なテンプレートから選べる。また、テンプレートの調整は、スライダーなどの直感的なインタフェースで容易に変更できる。

また、一般的な動画共有サービスでは、あらかじめ用意された複数の静止画を高速に切り替えて動画を表示している。このため、後から動画の内容を変更することが難しい。一方ＴｅｘｔＡｌｉｖｅでは、プログラミング環境技術によりスタイルやテンプレートのようなプログラムをブラウザ上でリアルタイムに実行し、歌詞アニメーションを表示している。したがって、既存の動画の演出を他の楽曲の動画に適用したり、動画の一部だけ編集したりすることが容易であり、さまざまなユーザーが一つの作品からいくつもの派生作品を作り上げる文化を技術で下支えすることができる。

３．ウェブ上でのプログラミングによる演出や編集機能の強化が可能

ＴｅｘｔＡｌｉｖｅでは、あらかじめ用意されたテンプレートに満足できない場合、ユーザー自身で新しいテンプレートをプログラミングできる。ユーザーが編集用インタフェースを閉じることなく、歌詞アニメーションを再生したままで文字の動きなどを決めるアルゴリズムを書き換えて更新できるという、これまでにないライブプログラミング^注１１）を実現している。さらに、ＴｅｘｔＡｌｉｖｅの機能の一部は他のウェブページに埋め込めるウェブＡＰＩとして公開されており、プログラマーは自身が制作しているウェブページに歌詞や文字のアニメーションを表示して訪問者を楽しませることができる。

ユーザーがプログラミングを行うツールとして、２つの方法を提供している。

• （ａ）プログラミングパネル：ＴｅｘｔＡｌｉｖｅのインタフェースの一つである編集パネル内のプログラミングパネルを使えば、歌詞アニメーションのテンプレートとして用意されているプログラムを表示・編集できる。編集したプログラムはすぐに実行され、歌詞アニメーションが更新される。結果がすぐに目に見えるため、プログラミングを新たに学習するユーザーに受け入れやすいインタフェースとなっている。また、プログラムにシンプルな記法でコメントを付記することで、テンプレートの見た目を調整できるスライダーなどのインタフェースを編集パネルに追加することもできる（図４）。プログラミングをしないユーザーも、このインタフェースを利用して意図通りの演出を行うことができる。
• （ｂ）ウェブＡＰＩ：ＴｅｘｔＡｌｉｖｅが公開しているウェブＡＰＩを用いると、ウェブページ上に歌詞アニメーションを表示したり、歌詞アニメーションと同期して動くコンテンツを表示したり、歌詞に限らない文字コンテンツをアニメーション化して表示したりできる。

＜今後の予定＞

誰でもウェブブラウザから利用できる歌詞アニメーション制作支援サービス「ＴｅｘｔＡｌｉｖｅ（テキストアライブ）」の持続的な研究開発・運用を進めていく。今回開発した、音楽理解技術により楽曲の中身を自動解析して得られた情報を元にコンテンツを自動生成できる技術や、コンテンツの視聴と編集をスムーズに行き来できるインタフェースを提供するプログラミング環境技術を、産業界と連携して、音楽配信サービスや、音楽に限らないコンテンツの制作支援、プログラミング教育など、さまざまな応用に展開していく予定である。

＜用語解説＞

注１） 歌詞アニメーション

歌詞アニメーションは、楽曲の再生タイミングに合わせて歌詞の文字をダイナミックに変形・移動して描画することで、楽曲をより魅力的に演出する動画コンテンツである。このような表現手法は、キネティック　タイポグラフィー（Ｋｉｎｅｔｉｃ　Ｔｙｐｏｇｒａｐｈｙ）やモーション　グラフィックス（Ｍｏｔｉｏｎ　Ｇｒａｐｈｉｃｓ）などと呼ばれることもある。ＴｅｘｔＡｌｉｖｅの歌詞アニメーションは、通常の動画コンテンツと異なり、文字の変形・移動がリアルタイムにプログラムで制御されている。このため、解像度とフレームレートを各端末に最適化でき、ユーザーがコンテンツを視聴しながら編集できるという特長がある。

注２） 楽曲・動画共有サービス

誰でも楽曲や動画を投稿・公開・視聴できるウェブ上のサービス。代表的な動画共有サービス（ニコニコ動画とＹｏｕＴｕｂｅ）では外部プレーヤー機能が提供されており、外部のウェブページに埋め込んで動画を再生できる。

注３） 音楽理解技術

楽曲の中身を自動的に解析できる技術である。ウェブ上の楽曲の多くは、音響信号で表現されている。音響信号は、音楽演奏の音波を記録した信号であるため、音符や歌詞が並ぶ楽譜とは違って、いつどんな高さの音が鳴っているか、歌詞のどの部分が発声されているかは記録されていない。ＴｅｘｔＡｌｉｖｅで使用する産総研の音楽理解技術は、楽曲の音響信号と歌詞の文字情報から歌詞発声タイミングを自動解析できる。

注４） プログラミング環境技術

プログラムを編集・実行・デバッグするインタフェースを一通り揃えた環境を構築する技術である。従来は、プログラミングの前提知識を持ったプログラマーのための環境を構築するために利用されてきた。一方、今回新たに開発した産総研のプログラミング環境技術は、プログラムの用途を限定してインタフェースを使いやすく設計し、前提知識がないユーザーでも利用できる環境を実現した。ユーザーは、プログラミング環境であることを意識せず、ＴｅｘｔＡｌｉｖｅを歌詞アニメーションの制作ツールとして利用できる。しかし、ＴｅｘｔＡｌｉｖｅは歌詞アニメーションを制御するプログラムを編集（アニメーションの内容を変更）・実行（アニメーションを描画）・デバッグ（アニメーションの内容を確認して修正）できるプログラミング環境である。そのため、単なる制作ツールでは不可能なライブプログラミングを行って、演出や編集機能を強化できる。

注５） インタフェース

インタフェースは、ユーザーがコンピュータと情報をやり取りするための仕組みの総称である。ＴｅｘｔＡｌｉｖｅは、歌詞アニメーションの編集に特化したインタフェースを提供することで、効率的にアニメーションの見た目を自分好みに調整したり、歌詞発声タイミングを訂正したりできるように設計されている。

注６） Ｓｏｎｇｌｅ（ソングル）

「Ｓｏｎｇｌｅ（ソングル）」（http://songle.jp）とは、楽曲の可視化機能やサビ出し機能を使用することで、より能動的で豊かな音楽鑑賞ができるウェブ上のサービスである。楽曲の中身を音楽理解技術で自動解析した際に生じた誤りを、ユーザーが手動で自発的に訂正し、その結果を共有できるインタフェースを備えている。今回ＴｅｘｔＡｌｉｖｅと連携するために、楽曲と歌詞のＵＲＬを与えると、歌詞発声タイミングを自動解析する機能を追加した。

注７） Ｓｏｎｇｒｉｕｍ（ソングリウム）

「Ｓｏｎｇｒｉｕｍ（ソングリウム）」（http://songrium.jp）とは、楽曲間の相互の関係性を可視化し、ユーザー自身が関係性を表すタグ付けを行えるようにすることで、楽曲の背景知識を踏まえ、共有して豊かな音楽鑑賞ができるウェブ上のサービスである。ユーザーはＳｏｎｇｌｅやＳｏｎｇｒｉｕｍを利用して楽曲の理解を深め、ＴｅｘｔＡｌｉｖｅ上での創作活動に役立てることができる。ＴｅｘｔＡｌｉｖｅ・Ｓｏｎｇｌｅ・Ｓｏｎｇｒｉｕｍは、ユーザーが視聴と創作を自由に行き来できるよう相互リンクを結んでいる。

注８） ベータ版

開発初期にテストの目的で提供される試用版である。ＴｅｘｔＡｌｉｖｅでもこれまでにベータ版を試験公開して不具合を改善してきたが、新たな機能とともに、２０１５年９月８日に一般公開する。

注９） ウェブＡＰＩ

プログラムの機能の一部を、別のプログラムから利用できるようにする仕組みをＡＰＩ（Ａｐｐｌｉｃａｔｉｏｎ　Ｐｒｏｇｒａｍｍａｂｌｅ　Ｉｎｔｅｒｆａｃｅ）と呼ぶ。ウェブＡＰＩは、このようなＡＰＩがウェブ経由で利用できるようになっている。プログラマーは、ＴｅｘｔＡｌｉｖｅが公開しているウェブＡＰＩを利用することにより、自身のウェブページ上でＴｅｘｔＡｌｉｖｅの機能の一部を利用できる。

注１０） 歌詞発声タイミング

歌詞のそれぞれの文字が楽曲中のどの時刻からどの時刻まで発声されているかという情報。ＴｅｘｔＡｌｉｖｅで利用されている音楽理解技術は、日本語と英語の歌詞から読み方を推定し、楽曲の音響信号から歌声を抽出して、それぞれの対応付けを自動的に推定できる。

注１１） ライブプログラミング

プログラミングは、通常、プログラムの実行内容を編集（コーディング）する時間と、実際にプログラムを実行してみて動作に誤りがないか確認（デバッグ）する時間に分かれている。ライブプログラミングは、プログラムを実行しながら、プログラムの内容を編集できるようにする技術である。ＴｅｘｔＡｌｉｖｅでは、ライブプログラミングにより歌詞アニメーションを視聴しながら、その演出に用いられるアルゴリズムを編集できる。

＜お問い合わせ先＞

＜研究に関すること＞

産業技術総合研究所 情報技術研究部門 メディアインタラクション研究グループ　研究員
加藤 淳
〒305-8568 茨城県つくば市梅園１－１－１　中央第２
Tel：029-862-6622　Fax：029-861-3313
E-mail：

首席研究員　兼　メディアインタラクション研究グループ　研究グループ長
後藤 真孝
〒305-8568 茨城県つくば市梅園１－１－１　中央第２
Tel：029-861-5898　Fax：029-861-3313
E-mail：

＜ＪＳＴ事業に関すること＞

科学技術振興機構 戦略研究推進部
松尾 浩司
〒102-0076 東京都千代田区五番町７　Ｋ’ｓ五番町
Tel：03-3512-3526　Fax：03-3222-2066
E-mail：

＜報道担当＞

産業技術総合研究所 企画本部 報道室
〒305-8568 茨城県つくば市梅園１－１－１　中央第２　つくば本部・情報技術共同研究棟８Ｆ
Tel：029-862-6216　Fax：029-862-6212
E-mail：

科学技術振興機構 広報課
〒102-8666 東京都千代田区四番町５番地３
Tel：03-5214-8404　Fax：03-5214-8432
E-mail：