Question

我的epub3文档中有一个页面，其中包含几行文本。当用户按下一行时，我使用html5音频元素播放与此行相关的音频。所有音频都存储在一个mp3 / ogg文件中。因此，我认为可以在smil文件中定义它们，而不是在javascript中定义每行的开始和结束时间。我应该使用Html5 File API读取smil文件还是有另一种方法？

Answer 1

通过使用Smil文件，您可以使用音频文件读取该行。

在HTML代码中，您需要将句子拆分成单词，例如。 w01，w02 ....并创建smil文件，在这里使用 ClipBegin 和 ClipEnd 在page3.mp3中根据该单词分割剪辑秒数。（您可以使用音频编辑器（例如GoldWave）分割片段秒数）。将以下代码添加到您的打包文件中。

HTML代码：

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" 
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<meta name="viewport" content="width=623, height=911" />
<meta charset="UTF-8"/>
<title>Page 03</title>
</head>
<body>
<div class="page3_item1">
<span id="w01">Some</span> <span id="w02">animals</span> <span id="w03">hide</span> 
<br/><span id="w04">to</span> <span id="w05">stay</span> <span id="w06">safe</span> 
<span id="w07">from</span> <span id="w08">enemies</span>.</div>
<audio id="myaudio">
<source src="audio/page3.mp3" type="audio/mpeg"/>
</audio>
</body>
</html>

SMIL文件代码：

<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" 
xmlns:epub="http://www.idpf.org/2007/ops">
<body>
<par id="p_w01"><text src="p03.xhtml#w01"/><audio src="audio/page3.mp3"  
clipBegin="0s" clipEnd="10s"/></par>
<par id="p_w02"><text src="p03.xhtml#w02"/><audio src="audio/page3.mp3"  
clipBegin="11s" clipEnd="18s"/></par>
<par id="p_w03"><text src="p03.xhtml#w03"/><audio src="audio/page3.mp3"  
clipBegin="19s" clipEnd="24s"/></par>
<par id="p_w04"><text src="p03.xhtml#w04"/><audio src="audio/page3.mp3"  
clipBegin="25s" clipEnd="35s"/></par>
<par id="p_w05"><text src="p03.xhtml#w05"/><audio src="audio/page3.mp3"  
clipBegin="36s" clipEnd="40s"/></par>
<par id="p_w06"><text src="p03.xhtml#w06"/><audio src="audio/page3.mp3"  
clipBegin="41s" clipEnd="48s"/></par>
<par id="p_w07"><text src="p03.xhtml#w07"/><audio src="audio/page3.mp3"  
clipBegin="49s" clipEnd="58s"/></par>
<par id="p_w08"><text src="p03.xhtml#w08"/><audio src="audio/page3.mp3"  
clipBegin="59s" clipEnd="65s"/></par>
</body>
</smil>

打包文件：

<?xml version="1.0" encoding="UTF-8"?>
<package>
<metadata>
<meta property="media:duration" refines="#p03smil">0:00:04.600</meta>
</metadata>

<manifest>
<item id="page3" href="audio/page3.mp3" media-type="audio/mpeg"/>
<item id="p03smil" href="smil/p03.smil" media-type="application/smil+xml"/>
</manifest>

读取Smil文件

1 个答案: