Skip to content

TextAliveJp/textalive-app-lyric-sheet

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

TextAlive App API lyric sheet example

インタラクティブな歌詞カードを実装した TextAlive App API のサンプルコードです。 発声にあわせて歌詞が表示され、歌詞をクリックするとそのタイミングに再生がシークします。 また、このアプリが TextAlive ホストと接続されていなければ再生コントロールを表示します。

ビルドツールを何も使わず script タグで TextAlive App API を読み込んでいます。CodePenにアクセスすると、Webブラウザ上でこのアプリケーションのソースコードを編集できます。

TextAlive ホストと接続された状態をテストするには TextAlive App Debugger のページにアクセスしてください。

sample

違う楽曲で試すには

TextAlive App API で開発されたWebアプリケーションは、(特定の楽曲向けに作り込んでいない限り)URLのクエリパラメタで ta_song_url={楽曲のURL} を指定すると異なる楽曲で演出を試せます。

開発

Node.js をインストールしている環境で以下のコマンドを実行すると、開発用サーバが起動します。

npx http-server .

Node.jsに依存せず、その他のHTTPサーバを使うこともできます。

ビルド

ビルドツールは不要です。

サンプルコードのデモページGitHub Pages で、このリポジトリ直下のファイルが提供されています。

TextAlive App API

TextAlive

TextAlive App API は、音楽に合わせてタイミングよく歌詞が動くWebアプリケーション(リリックアプリ)を開発できるJavaScript用のライブラリです。

TextAlive App API について詳しくはWebサイト TextAlive for Developers をご覧ください。


https://github.com/TextAliveJp/textalive-app-lyric-sheet

About

インタラクティブな歌詞カードを実装した TextAlive App API の作例

Topics

Resources

Stars

Watchers

Forks