Adobe After Effects で作成したアニメーションを Lottie プラグインで書き出したものをビートに合わせて表示するサンプルコードです。 Lottie 関係の部分以外は basic example そのままです。
リポジトリに含まれている fw_white.json が Lottie のアニメーションデータです。他のアニメーションに差し替えて遊んでみてください。アニメーションを作成する環境がない場合は LottieFiles で公開されている無償のアセットを探してみてください。
- デモページ: https://textalivejp.github.io/textalive-app-lottie/
- Lottie: https://airbnb.io/lottie/
- LottieFiles: https://lottiefiles.com/
TextAlive ホストと接続された状態をテストするには TextAlive App Debugger のページにアクセスしてください。
English version available in README.en.md.
TextAlive App API で開発されたWebアプリケーションは、(特定の楽曲向けに作り込んでいない限り)URLのクエリパラメタで ta_song_url={楽曲のURL}
を指定すると異なる楽曲で演出を試せます。
Node.js をインストールしている環境で以下のコマンドを実行すると、開発用サーバが起動します。
npm install
npm run dev
以下のコマンドで docs
以下にビルド済みファイルが生成されます。 サンプルコードのデモページ は GitHub Pages で、このリポジトリの docs
以下のファイルが提供されています。
npm run build
TextAlive App API は、音楽に合わせてタイミングよく歌詞が動くWebアプリケーション(リリックアプリ)を開発できるJavaScript用のライブラリです。
TextAlive App API について詳しくはWebサイト TextAlive for Developers をご覧ください。
https://github.com/TextAliveJp/textalive-app-lottie