JavaScript/CSS でカラオケ風テロップ表示
JavaScript/CSS でカラオケ風のテロップを表示します。Web ゲームなどを作る用に少し書いていたコードを整理して公開します（使いやすいライブラリにはなっていません）。
デモ
動画
音源ありのデモ。見ただけでは HTML で書かれているかわかりませんが……。
※ サンプルに使用した「ヒャダインのカカカタ☆カタオモイ-C（ヒャダイン）」は、レコード会社からニコニコ動画での利用が許諾された音楽原盤です。
Web ページ（音源なし）
君が代のデモです。音源はないのでメディアプレイヤーは動作しません。
コード
GitHub に公開しています。元のコードは TypeScript で記述。jQuery, Knockout.js も利用しています。歌詞は、君が代になっています。
タイムタグ付き歌詞を表す Lyrics class を用意しています。
仕組み
タイムタグ付き歌詞
歌詞とタイミングは、タイムタグ付きの歌詞データを使います。
[00:01:34]君[00:03:18]が[00:05:11]代[00:07:17]は[00:10:00]
[00:10:20]千[00:11:10]代[00:12:14]に[00:14:14]八[00:15:03]千[00:16:46]代[00:17:48]に[00:19:00]
[00:19:13]さ[00:20:04]ざ[00:21:07]れ[00:23:47]石[00:25:50]の[00:28:00]
[00:28:28]巌（いわお）[00:31:71]と[00:32:58]な[00:34:25]り[00:34:96]て[00:37:00]
[00:37:81]苔（こけ）[00:39:95]の[00:42:36]む[00:45:24]す[00:46:97]ま[00:49:62]で[00:52:89]
ちなみに、タイムタグエディターは RhythmicaLyrics が、有名です。
表示方法
表示は、タイミングに合わせて単語の CSS を書き換えます。linear-gradient を使って文字の途中で色を変えています。そのため、Chrome でしか動作しません。
はじめは、同じ歌詞を重ねてタイミングに合わせて手前の歌詞を表示する、ということをしてみましたが、重ねると見た目が汚いので断念しました。
追記： 文字の縁取り（中抜き文字）効果を追加。同じ文字を重ねて実現しています。
メディアプレイヤー
HTML5/JavaScript で動作するメディアプレイヤーは、MediaElement.js を利用しています。
