1. Home
  2. TextAliveの外部埋め込み

TextAliveの外部埋め込み

JavaScriptのAPIを利用すると、TextAliveの機能を外部Webサイトから利用できます。

このページで説明されているすべてのAPIを利用した例は junkato.jp を見てみてください。

<br />
&lt;div id=&quot;tapl&quot;&gt;&lt;/div&gt;<br />
&lt;script src=&quot;http://textalive.jp/javascripts/api/embed-v1.js&quot;&gt;&lt;/script&gt;<br />
&lt;script&gt;<br />
  function taAsyncInit(Player) {<br />
    var player = new Player({ playerRoot: '#tapl' });<br />
    player.loadVideo(349);<br />
  }<br />
&lt;/script&gt;<br />

APIの基本

TextAliveの動画再生機能を外部サイトから利用するには embed-v1.js を読み込みます。
そして、グローバル関数 taAsyncInitを定義し、引数として得られるPlayerクラスのインスタンスを生成します。

例えば、上の例では動画ID: 349を読み込んで #playerの中に表示します。動画プレイヤーの大きさは親要素（#player）の横幅に合わせて自動的にリサイズされます。通常、アスペクト比は16:9で固定です。

taAsyncInit(Player)

embed-v1.js の読み込み完了時に呼ばれるグローバル関数です。引数としてPlayerクラスを表すJavaScriptのオブジェクトが渡されます。

コンストラクタ

Playerクラスのコンストラクタには次の引数を渡します。（名前の末尾に?がついているものはオプションです。）

  • options : 以下のkey-valueペアを含むJSONオブジェクト
    • playerRoot : TextAliveの動画を表示させるHTMLの親要素を表すセレクタ（文字列）
    • timerRoot? : Songle Widgetを表示させるHTMLの親要素を表すセレクタ（文字列）
    • songleWidget? : Songle Widgetのインスタンス（SongleWidgetオブジェクト）
    • hideOverlay? : 動画読み込み中にオーバーレイを表示させない場合にtrue（真偽値）
    • infobarPosition?: 動画に利用されている楽曲や歌詞などの情報を表示する位置を決める文字列（right-top, right-bottom, left-top, left-bottomのいずれか）
    • maxWidth?: 動画が占める幅の最大値（数値）
    • maxHeight?: 動画が占める高さの最大値（数値）
    • onReady? : 動画読み込みに成功した際のコールバック関数
    • onError? : 動画読み込みに失敗した際のコールバック関数

options.onReady: function(player)

引数に、歌詞アニメーションの読み込みに成功したPlayerインスタンスが渡されます。

options.onError: function(errors)

引数に、歌詞アニメーションの読み込みに失敗した原因を表すJSONオブジェクトが渡されます。
JSONオブジェクトは次のkey-valueペアを含むことがあります。

  • song : 楽曲の読み込みに失敗した理由（文字列）
  • lyrics : 歌詞の読み込みに失敗した理由（文字列）

loadVideo(videoId)

Playerインスタンスを作成したら、このメソッドを使って歌詞アニメーションを読み込みます。videoIdはTextAliveの各動画URL末尾の数値です。
（例えば/videos/23なら23です。）

synthVideo(songPath)

歌詞アニメーションを読み込むだけでなく、楽曲情報をもとに動画を自動生成して表示することもできます。

loadLatestVideoBySong(songPath)

楽曲URLを指定して、最新の歌詞アニメーションを読み込みます。歌詞アニメーションが一度も作成されていない場合はsynthVideo の処理にフォールバックします。

setStyle(style)

歌詞アニメーションの内容をリセットして指定したスタイルを適用します。スタイルは、以下から選ぶことができます。スタイルの具体例は 楽曲ページで試してみてください。

  • "Pop" : ポップ
  • "Energetic" : 元気でポップ
  • "Nostalgic" : ノスタルジック
  • "Console" : コンソール
  • "Bold" : 大胆不敵
  • "Calm" : おとなしく上品
  • "Simple" : シンプル

dispose()

Playerインスタンスが不要になったら呼びます。一つのWebページ上で一度しか動画を読み込まない場合は不要ですが、動的に何回も動画を読み込む場合は、毎回必ず、dispose()を呼ぶようにしてください。

内部的には、動画の読み込み時に生成されたSongle WidgetやCanvas要素、ウィンドウに追加されたイベントリスナなどを削除しています。