音声に連動する字幕アニメーション
発話中の単語を、文字の内側から塗り進める。
Web Speech APIのための小さなTypeScriptライブラリです。ブラウザの音声に合わせ、読み上げ中の単語を文字の内側で左から右へ連続的に塗り進めます。
npm install @enumura/glyphflow ブラウザ音声5語 · 単語ごとに連続した文字内ワイプ
ライブ音声デモ
Speakを押して、字幕の動きを見てください。
この字幕自体がデモです。読み上げ中の単語は、文字の内側で順番に塗り進みます。再生後も下に計測結果が残ります。
ブラウザの音声対応を確認しています…
見た目の仕組み
単語はひとつのまま、色だけが文字の形の中を進みます。
アクティブな単語は単一のDOM spanです。GlyphFlowが変更するのは --kn-progress だけなので、単語全体を一度に切り替えるのではなく、ハイライトが文字の形の中を移動します。
読み上げ中
caption音声を基準にする
ブラウザが単語を話し始めるタイミングが、字幕を進める基準です。
ブラウザが単語の開始を通知すると、その単語だけが文字の内側でワイプを始めます。次の単語の開始通知を受けると、前の単語を完了します。音声の実際のタイミングに、表示の切り替わりを合わせる仕組みです。
音声と字幕の同期
音声が「Every」を読み始める
「letter」の開始で、Everyが完了
「follows」の開始で、letterが完了
次の単語が話し始められるたびに、前の単語を完了し、現在の単語だけを文字の内側で塗り進めます。
次のワイプを補正する
話す速さに合わせて、次のワイプを少しずつ整えます。
単語が始まった時点では、終わる正確な時刻はまだ分かりません。GlyphFlowは次の単語が始まるまで、いったんおおよその速さで文字内ワイプを動かします。次の単語が始まると前の単語にかかった時間が分かるため、後ろの単語の動きを少し合わせます。
いま読んでいる単語Every
初めはおおよその速さで、文字の内側を塗り進めます。
次の単語が始まる
前の単語にかかった実際の時間が分かる
次の単語letter
分かった時間を少しだけ反映して、次のワイプを始めます。
これは文字ごとの発音に合わせる機能ではありません。ブラウザが単語の開始を知らせるvoiceで動きます。