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

2015/03/21DevelopmentJavaScript,TypeScript

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

デモ

動画

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

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

Web ページ(音源なし)

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

telop

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;
}

view raw

style.css

hosted with ❤ by GitHub

はじめは、同じ歌詞を重ねてタイミングに合わせて手前の歌詞を表示する、ということをしてみましたが、重ねると見た目が汚いので断念しました。

追記: 文字の縁取り(中抜き文字)効果を追加。同じ文字を重ねて実現しています。

メディアプレイヤー

HTML5/JavaScript で動作するメディアプレイヤーは、MediaElement.js を利用しています。