BLOG

社員ブログ - 仕事から たわいの無い話まで ざっくばらんにご紹介します。

2017/01/24

SMILファイルとマルチメディアコンテンツ

SMILファイルとマルチメディアコンテンツ

SMILファイル(スマイルと読みます)は、WWW上でマルチメディアコンテンツを表現するためのマークアップ言語の一つです。現在、W3CにてSMIL3.0が勧告されています。
https://www.w3.org/AudioVideo/

SMILファイルでの指定により音声や文字などの同期して再生することができ、HTMLだけでは実現の難しい、音声活字同期再生のコンテンツを作成するのに役立ちます。
AppleのiBooksの本の中で、音声で文章を読み上げると同時に、読み上げた部分の文字の色が変わる本を見たことがある方もいるでしょう。

概要

電子書籍のEPUBファイルとしてパッケージングする場合、SMILファイルと各ファイルの関係は、以下の図のようになります。

SMILファイル

SMILファイルでは、音声ファイルの開始・終了位置を指定して、それに対応する表示(XHTMLの文字列の一部分)を指定します。
一部抜粋すると、例えばこんな感じです。

例(抜粋):

<par id="par1">
<text src="page_001.xhtml#W1" />
<audio src="p08-09.m4a" clipBegin="4.086s" clipEnd="6.892s" />
</par>

 
このように、1つの文(音声と同期して表示を変えたい部分)に対して、1つのpar要素が対応します。
par要素の中には、text要素とaudio要素が含まれます。

XHTMLファイル

そして、XHTML側で、対応するIDを指定します。
例(抜粋):

<div><span id="W1">Guten Tag. Dies ist okano.</span></div>

 

CSS ファイル

XHTML側で、読み上げている文字をハイライト表示するには、CSSで「.-epub-media-overlay-active」というクラスを作成し、その中で文字色指定などを行います。
例:

.-epub-media-overlay-active {
color: red;
}

 

まとめ

上記のような仕組みで、音声ファイルとXHTMLファイルをSMILファイルで同期して再生することができます。

今回は、SMILファイルを使った同期再生の概要について説明しました。

最新記事

アーカイブ

カテゴリ

タグ

投稿者

OUR MISSION

理念

「ITで人を豊かにする」

私たちが開発したシステムやサービスを通じ、物心両面から豊かになってもらう。そして人生を楽しんでもらう。そこに私たちが存在する理由があります。
日々新たな製品・サービスを開発・ご提供し、最後まで誠意をもって取り組んで成果を出す。
ご縁を頂いた方やその先の人達に安心と満足をご提供出来る様、誠心誠意取り組んで参ります。

pageTop