我的 epub3 文档中有一页,里面有几行文字。当用户按下一行时,我使用 html5 音频元素播放与此行关联的音频。所有音频都存储在一个mp3/ogg文件中。因此,与其在javascript中定义每行的开始和结束时间,我认为我可以在smil文件中定义它们。我应该使用 Html5 文件 API 读取 smil 文件还是有其他方法?
通过使用Smil文件,您可以使用音频文件读取该行。
在HTML代码中,您需要将句子拆分为单词,例如w01,w02 ....并创建 smil 文件,在第 3 页中.mp3使用ClipBegin和ClipEnd根据该词拆分剪辑秒数。(您可以使用音频编辑器(例如GoldWave(来分割剪辑秒数(。将以下代码添加到包文件中。
网页代码:
<?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>