JavaScript/CSS でカラオケ風テロップ表示

2015/03/202015/03/21DevelopmentJavaScript,TypeScript

JavaScript/CSS でカラオケ風のテロップを表示します。Web ゲームなどを作る用に少し書いていたコードを整理して公開します（使いやすいライブラリにはなっていません）。

デモ

動画

音源ありのデモ。見ただけでは HTML で書かれているかわかりませんが……。

※ サンプルに使用した「ヒャダインのカカカタ☆カタオモイ-C（ヒャダイン）」は、レコード会社からニコニコ動画での利用が許諾された音楽原盤です。

Web ページ（音源なし）

君が代のデモです。音源はないのでメディアプレイヤーは動作しません。

Demo

コード

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 でしか動作しません。

	.telop {
	font-size: 24px;
	font-weight: bold;
	display: inline-block;
	position: relative;
	background: linear-gradient(to right, #000 0,#000 0px,#ffffff 0px,#ffffff 100%);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	}