本プロジェクトについて

TextAlive「{音楽理解,プログラミング環境}技術で、{手間いらずの,もっと自由な}歌詞アニメーション制作を」

TextAlive(テキストアライブ)は、楽曲中の歌声に合わせて歌詞をアニメーションさせる Kinetic Typography(キネティック・タイポグラフィー) と呼ばれる動画表現の制作支援サービスです。ウェブ上で公開されている楽曲・歌詞コンテンツを利用することで、楽曲に合わせた歌詞アニメーションを誰でも簡単に制作できます。

TextAliveの使い方については次のページをご覧ください。

TextAliveの使い方

動作環境

TextAliveは、JavaScriptが有効な最新のブラウザで動作するように設計されています。以下の環境で動作確認しています。

  • Windows 10: Microsoft Edge 38
  • Windows 7 & 8.1: Internet Explorer 11, Chrome 56
  • Mac OS X: Safari 10, Chrome 56

TextAliveは継続的に研究開発を行っています。開発履歴については次のページをご覧ください。

TextAliveの開発履歴

TextAliveでできること

音楽理解技術で、手間いらずのアニメーション制作を

TextAliveが備える音楽理解技術は、ウェブサイト上で公開されている任意の楽曲(MP3形式の音響信号ファイル等の楽曲・動画共有サービス上の楽曲・動画)と、その歌詞のURLを登録するだけで、楽曲中の歌声と歌詞の対応関係を自動的に解析します。

これまで、歌詞がタイミングよく動く歌詞アニメーションは、魅力的な動画表現である一方で、歌詞の一文字ずつのタイミングを手作業で指定する必要がありました。

TextAliveでは、そのような手間のかかる歌声と歌詞の対応付けを行うことなく、最初から「どのような歌詞アニメーションにしたいか」ということを考えることができます。

直感的なインタフェースで、手軽に自分好みの演出を

ユーザは、楽曲を選び、動画の「スタイル」を指定することで、音楽理解技術であらかじめ解析された発声タイミングやサビ情報などを利用して、様々な演出の歌詞アニメーションをすぐに制作できます。

また、直感的なインタフェースにより、単語や文字ごとに動きの「テンプレート」を選び、さらに演出のオプションを細かく調整できるため、ユーザの意図を正確に反映した演出を実現できます。

例えば、その日の気分に合わせてスタイルを変えて視聴するなど、新しいオンライン動画鑑賞の形を体験してみませんか。

プログラミング環境技術で、より自由なアニメーション制作を

TextAliveでは、あらかじめ用意された動画のスタイルやテンプレート以外にも、プログラミングによって既存のテンプレートの一部を編集したり、 ユーザ自身で新しく作り出すことができます。

また、そのようなプログラミングのために、ユーザが編集用インタフェースを閉じることなく、 歌詞アニメーションを再生したままで文字の動きなどを決めるアルゴリズムを書き換えて更新できるライブプログラミング可能なインタフェースが備わっています。

「動画に合った歌詞アニメーションをつける」、「新しい歌詞描画アルゴリズムを実現する」という二種類の創造性と、それをみんなで共有することで、歌詞アニメーションの可能性を拡げることが、TextAliveの目指す未来です。

開発体制

産総研 TextAliveチームでは、デザイナー、プログラマーをはじめ、さまざまな人が創作を楽しめる技術の研究開発に取り組んでいます。Web上にコンテンツを公開されている多くの方々によってはじめて可能になったプロジェクトであり、Webを前提としたコンテンツ制作の可能性を追求しています。

本研究は、JST CREST OngaCRESTプロジェクトの支援を受けています。研究に関する詳しい情報は、国際会議ICLC 2015で発表されたインタラクティブ論文や、研究を主に進めている加藤のWebサイトに掲載されています。

開発履歴はこちらに掲載されています。機能追加や設備点検に伴うサービス停止等のアナウンスはTwitterアカウント @TextAliveJp でも行っています。

不具合やご意見などは右記メールアドレス宛にご連絡ください。

産業技術総合研究所 情報技術研究部門 メディアインタラクション研究グループ TextAlive Project <textalive-ml@aist.go.jp>

加藤 淳 デザイン・実装全般
川崎 裕太Songle歌詞同期関連の実装
井上 隆広Songle Widget・動画ダウンロード機能の実装
石田 啓介スタイル設計
後藤 真孝Songle音楽理解エンジン
中野 倫靖Songle歌声理解・歌詞同期エンジン

注意事項

謝辞

TextAliveは以下のフォントを利用しています。制作者の皆様に感謝します。歌詞アニメーションで利用されているフォントを変更したい場合は、歌詞アニメーションを編集してください。他に、当サイト上で利用したいフォントがある場合は、検討しますのでTwitterアカウント @TextAliveJp などにお知らせください。(当面、Web上での再配布が許可されている無償フォントのみ対応予定です。)

また、TextAliveは主にTypeScript 2と以下のライブラリ・ツールを利用して開発されています。開発者の皆様に感謝します。

TextAlive Server

  • Visual Studio Code + Grunt (開発環境)
  • Node.js (Webサーバ)
  • Express 4 (フレームワーク)
  • Stylus (CSSレンダリングエンジン)
  • Jade (HTMLレンダリングエンジン)

TextAlive Client (HTML/CSS/JavaScript)

  • jQuery - Write Less, Do More. (MIT License)
  • Bootstrap 3 - スタイルシート (MIT License)
  • EaselJS (Canvasレンダラ)
  • Acorn + JS-Interpreter (JavaScriptインタプリタ)
  • Ace (JavaScriptエディタ)