EPUB SMIL音頻電子書實驗

02-02

這篇文章主要介紹的是在epub中插入SMIL文件，使之文字與音頻同步。製作教程參考How To Create EPUB 3 Read Aloud eBooks，並把製作中注意做了一次總結。

本次實驗主要針對的是音樂與歌詞的同步，而不是常見的有聲圖書。

Media Overlays在EPUB中指的是視覺內容與聽覺內容同步呈現，即把預先錄製好的音頻內容與書面文字相匹配。

那Media Overlays是怎麼工作的呢？其實很簡單，給出一個文本片段並與之對應的音頻片段做同步：

第1個片段對應音頻文件中0s到16s之間；
第2個片段對應16s到33s；
……

這裡的片段可以是一個整段、一句話甚至是一個字詞，根據用戶體驗採納一種方式。如果你手動生成的SMIL精度越高，你所需要做的工作就越多。

下面代碼展示使用SMIL文件描述文字與音頻的同步信息：

<smil version="3.0" xmlns="http://www.w3.org/ns/SMIL" xmlns:epub="http://www.idpf.org/2007/ops">n <body>n <seq epub:textref="../Text/qpd.xhtml" epub:type="bodymatter chapter" id="QPD">n <par id="fw01"><text src="../Text/qpd.xhtml#lrc01"/><audio clipBegin="00:00:33.11" clipEnd="00:00:39.51" src="../Audio/QPD.mp3"/></par>n <par id="fw02"><text src="../Text/qpd.xhtml#lrc02"/><audio clipBegin="00:00:39.51" clipEnd="00:00:45.83" src="../Audio/QPD.mp3"/></par>n <par id="fw03"><text src="../Text/qpd.xhtml#lrc03"/><audio clipBegin="00:00:45.83" clipEnd="00:00:52.53" src="../Audio/QPD.mp3"/></par>n </seq>n </body>n</smil>n

這個SMIL文件的3個片段做了4件事情：

文本片段標識符。例如：../Text/qpd.xhtml#lrc01；
文本所使用的音頻文件（../Audio/QPD.mp3）。
文本片段開始時間（00:00:33.11）。
文本片段結束時間（00:00:39.51）。

上面的SMIL文件用中文來表述為：

在qpd.xhtml文件中的文本片段lrc01，即是音頻文件中的33.11s到39.51s這一段內容。

說明：請在Sigil中創建EPUB3標準的電子書。

創建流程

創建有音頻內容的XHTML文件，你需要做以下步驟：

獲取一個音頻文件，本次試驗為一首歌曲；
將文本進行標識，每句一個id，與SMIL對應；
創建一個文本與音頻對應的SMIL文件；
將播放時突出顯示文本的CSS添加到樣式表中；
在OPF文件中添加元數據。

步驟1：音頻文件

本次實驗使用的音頻文件是從網頁雲音樂播放器上下載的。

音頻文件推薦使用MP3格式，採樣44100 Hz或48000 Hz。

步驟2：分配id

給XHTML文件中的文本片段添加id，本次演示的是歌曲，這類似詩歌，所以我採用一句歌詞為一個粒度。

XHTML代碼：

<body class="fayewong">n <div class="content">n <h1>清平調</h1>n 演唱：王菲n n 雲想衣裳花想容n 春風拂檻露華濃 n 若非群玉山頭見n 會向瑤台月下逢 n 一枝紅艷露凝香n 雲雨巫山枉斷腸 n 借問漢宮誰得似n 可憐飛燕倚新妝 n 名花傾國兩相歡n 長得君王帶笑看 n 解釋春風無限恨n 沉香亭北倚闌干 n 解釋春風無限恨n 沉香亭北倚闌干 n 雲想衣裳花想容n 春風拂檻露華濃 n 若非群玉山頭見n 會向瑤台月下逢 n 一枝紅艷露凝香n 雲雨巫山枉斷腸 n 借問漢宮誰得似n 可憐飛燕倚新妝 n 名花傾國兩相歡n 長得君王帶笑看 n 解釋春風無限恨n 沉香亭北倚闌干 n 解釋春風無限恨n 沉香亭北倚闌干 n 解釋春風無限恨n 沉香亭北倚闌干n n </div>n</body>n

歌詞文件可以使用foobar2000軟體播放下載音樂文件，然後從歌詞面板中複製歌詞。使用正則表達式刪去時間信息。

查找：[d{2}:d{2}.d{2}]n替換為空n

步驟3：創建SMIL文件

現在已經準備好了音頻和文本，可以開始創建SMIL文件了。這一步的難點主要在於對一句歌詞的開始時間和結束時間劃分。不過從foobar2000軟體複製的歌詞文件已經包含了時間信息。

你也可以使用自動化工具Audacity標註時間。

SMIL文件模板如下：

從foobar2000上複製的歌詞包含時間信息，使用正則表達式刪去不用的時間信息（原始歌詞是一字一個片段）：

[00:33.11]雲[00:33.36]想[00:33.67]衣[00:34.02]裳[00:34.42]花[00:35.32]想[00:36.07]容[00:38.17]n[00:39.52]春[00:39.72]風[00:40.07]拂[00:40.47]檻[00:40.92]露[00:41.77]華[00:42.62]濃[00:44.63]n...n

正則表達式：

查找：([一-龥])[d{2}:d{2}.d{2}]

替換：1

處理完成後如下：

[00:33.11]雲想衣裳花想容[00:38.17]n[00:39.52]春風拂檻露華濃[00:44.63]n...n

從上面的SMIL模板中可以看到我們還需要兩個編號，使用正則表達式處理上面的每句歌詞：

查找：]([一-龥]{7})[

替換：]t1t[

處理好的文本如下：

[00:33.11]t雲想衣裳花想容t[00:38.17]n[00:39.52]t春風拂檻露華濃t[00:44.63]n...n

將上述文本導入EXCLE中，給每列進行編號。因為id不可以使用純數字命名，所以我們需要再id前添加字母內容。

完成後如下：

fw01tlrc01t[00:33.11]t雲想衣裳花想容t[00:38.17]nfw02tlrc02t[00:39.52]t春風拂檻露華濃t[00:44.63]n...n

使用正則表達式統一格式化為SMIL信息：

查找：fw(d{2})tlrc(d{2})t[(.*?)]t([一-龥]{7})t[(.*?)]nn替換：<par id="fw1"><text src="../Text/qpd.xhtml#lrc2"/><audio clipBegin="3" clipEnd="5" src="../Audio/QPD.mp3"/></par>nn

然後補齊首尾代碼，完成後如下：

<?xml version="1.0" encoding="utf-8" ?>n<smil version="3.0" xmlns="http://www.w3.org/ns/SMIL" xmlns:epub="http://www.idpf.org/2007/ops">n <body>n <seq epub:textref="../Text/qpd.xhtml" epub:type="bodymatter chapter" id="QPD">n <par id="music-001"><text src="../Text/qpd.xhtml#music-1"/><audio clipBegin="00:00:00.00" clipEnd="00:00:16.36" src="../Audio/QPD.mp3"/></par>n <par id="music-002"><text src="../Text/qpd.xhtml#music-2"/><audio clipBegin="00:00:16.36" clipEnd="00:00:33.11" src="../Audio/QPD.mp3"/></par>n <par id="fw01"><text src="../Text/qpd.xhtml#lrc01"/><audio clipBegin="00:00:33.11" clipEnd="00:00:39.51" src="../Audio/QPD.mp3"/></par>n <par id="fw02"><text src="../Text/qpd.xhtml#lrc02"/><audio clipBegin="00:00:39.51" clipEnd="00:00:45.83" src="../Audio/QPD.mp3"/></par>n <par id="fw03"><text src="../Text/qpd.xhtml#lrc03"/><audio clipBegin="00:00:45.83" clipEnd="00:00:52.53" src="../Audio/QPD.mp3"/></par>n <par id="fw04"><text src="../Text/qpd.xhtml#lrc04"/><audio clipBegin="00:00:52.53" clipEnd="00:00:58.62" src="../Audio/QPD.mp3"/></par>n <par id="fw05"><text src="../Text/qpd.xhtml#lrc05"/><audio clipBegin="00:00:58.62" clipEnd="00:01:05.35" src="../Audio/QPD.mp3"/></par>n <par id="fw06"><text src="../Text/qpd.xhtml#lrc06"/><audio clipBegin="00:01:05.35" clipEnd="00:01:11.92" src="../Audio/QPD.mp3"/></par>n <par id="fw07"><text src="../Text/qpd.xhtml#lrc07"/><audio clipBegin="00:01:11.92" clipEnd="00:01:18.41" src="../Audio/QPD.mp3"/></par>n <par id="fw08"><text src="../Text/qpd.xhtml#lrc08"/><audio clipBegin="00:01:18.41" clipEnd="00:01:24.77" src="../Audio/QPD.mp3"/></par>n <par id="fw09"><text src="../Text/qpd.xhtml#lrc09"/><audio clipBegin="00:01:24.77" clipEnd="00:01:31.25" src="../Audio/QPD.mp3"/></par>n <par id="fw10"><text src="../Text/qpd.xhtml#lrc10"/><audio clipBegin="00:01:31.25" clipEnd="00:01:37.74" src="../Audio/QPD.mp3"/></par>n <par id="fw11"><text src="../Text/qpd.xhtml#lrc11"/><audio clipBegin="00:01:37.74" clipEnd="00:01:44.27" src="../Audio/QPD.mp3"/></par>n <par id="fw12"><text src="../Text/qpd.xhtml#lrc12"/><audio clipBegin="00:01:44.27" clipEnd="00:01:50.82" src="../Audio/QPD.mp3"/></par>n <par id="fw13"><text src="../Text/qpd.xhtml#lrc13"/><audio clipBegin="00:01:50.82" clipEnd="00:01:57.36" src="../Audio/QPD.mp3"/></par>n <par id="fw14"><text src="../Text/qpd.xhtml#lrc14"/><audio clipBegin="00:01:57.36" clipEnd="00:02:33.06" src="../Audio/QPD.mp3"/></par>n <par id="fw15"><text src="../Text/qpd.xhtml#lrc15"/><audio clipBegin="00:02:33.06" clipEnd="00:02:39.24" src="../Audio/QPD.mp3"/></par>n <par id="fw16"><text src="../Text/qpd.xhtml#lrc16"/><audio clipBegin="00:02:39.24" clipEnd="00:02:45.63" src="../Audio/QPD.mp3"/></par>n <par id="fw17"><text src="../Text/qpd.xhtml#lrc17"/><audio clipBegin="00:02:45.63" clipEnd="00:02:52.11" src="../Audio/QPD.mp3"/></par>n <par id="fw18"><text src="../Text/qpd.xhtml#lrc18"/><audio clipBegin="00:02:52.11" clipEnd="00:02:58.50" src="../Audio/QPD.mp3"/></par>n <par id="fw19"><text src="../Text/qpd.xhtml#lrc19"/><audio clipBegin="00:02:58.50" clipEnd="00:03:04.89" src="../Audio/QPD.mp3"/></par>n <par id="fw20"><text src="../Text/qpd.xhtml#lrc20"/><audio clipBegin="00:03:04.89" clipEnd="00:03:11.29" src="../Audio/QPD.mp3"/></par>n <par id="fw21"><text src="../Text/qpd.xhtml#lrc21"/><audio clipBegin="00:03:11.29" clipEnd="00:03:17.72" src="../Audio/QPD.mp3"/></par>n <par id="fw22"><text src="../Text/qpd.xhtml#lrc22"/><audio clipBegin="00:03:17.72" clipEnd="00:03:24.07" src="../Audio/QPD.mp3"/></par>n <par id="fw23"><text src="../Text/qpd.xhtml#lrc23"/><audio clipBegin="00:03:24.07" clipEnd="00:03:30.39" src="../Audio/QPD.mp3"/></par>n <par id="fw24"><text src="../Text/qpd.xhtml#lrc24"/><audio clipBegin="00:03:30.39" clipEnd="00:03:37.00" src="../Audio/QPD.mp3"/></par>n <par id="fw25"><text src="../Text/qpd.xhtml#lrc25"/><audio clipBegin="00:03:37.00" clipEnd="00:03:43.12" src="../Audio/QPD.mp3"/></par>n <par id="fw26"><text src="../Text/qpd.xhtml#lrc26"/><audio clipBegin="00:03:43.12" clipEnd="00:03:49.79" src="../Audio/QPD.mp3"/></par>n <par id="fw27"><text src="../Text/qpd.xhtml#lrc27"/><audio clipBegin="00:03:49.79" clipEnd="00:03:56.12" src="../Audio/QPD.mp3"/></par>n <par id="fw28"><text src="../Text/qpd.xhtml#lrc28"/><audio clipBegin="00:03:56.12" clipEnd="00:04:02.43" src="../Audio/QPD.mp3"/></par>n <par id="fw29"><text src="../Text/qpd.xhtml#lrc29"/><audio clipBegin="00:04:02.43" clipEnd="00:04:09.10" src="../Audio/QPD.mp3"/></par>n <par id="fw30"><text src="../Text/qpd.xhtml#lrc30"/><audio clipBegin="00:04:09.10" clipEnd="00:04:29.00" src="../Audio/QPD.mp3"/></par>n </seq>n </body>n</smil>n

注意：裡面的src需要補上如.../Text/或../Audio/，只要這樣在多看閱讀中才可以顯示播放按鈕。

命名與文本XHTML一樣，然後添加SMIL格式類型後綴。在Sigil中將這個文件導入到Misc文件夾中。

步驟4：修改CSS

為同步播放時突出顯示的文本內容添加樣式：

.-epub-media-overlay-active {n background-color: #FFFF99;n}n

步驟5：修改OPF文件

在OPF文件中添加一些元數據。

在OPF文件的<metadata>部分，你需要給電子書的音頻文件指定一個音頻持續時間。然後給所有音頻設置一個總時長。

<meta property="media:duration">0:04:29.620</meta>n<meta refines="#QPD" property="media:duration">0:04:29.620</meta>n

給音頻文件設置一個作者：

<meta property="media:narrator">Faye Wong</meta>n

定義上一個步驟使用的類選擇器：

<meta property="media:active-class">-epub-media-overlay-active</meta>n

然後是資源清單項目：

<item id="qpd.xhtml" href="Text/qpd.xhtml" media-type="application/xhtml+xml" media-overlay="QPD"/>n<item id="QPD.mp3" href="Audio/QPD.mp3" media-type="audio/mpeg"/>n<item id="QPD" href="Misc/qpd.xhtml.smil" media-type="application/smil+xml"/>n

第1行代碼的意思是：

id為qpd.xhtml的文件使用的是id為QPD的SMIL文件。

每個Audio和SMIL文件一個<item>。

注意：每個XHTML文檔最多可以與一個SMIL文件相關聯。

最後完成的EPUB電子書可以參考我自己做的！

https://pan.baidu.com/s/1slHOlfn

以上是本次實驗的全部內容！