Ultimately, the only advice that can be given is to strive for the finest granularity you can. Paragraphs may be easier to synchronize than sentences, but if the viewing screen isn’t large enough to view the entire paragraph the invisible part won’t ever come into view as the narration plays (the reading system can only know to resynch at the next point; it can’t intrinsically know that narration has to match what is on screen or have any way to determine what is on screen at any given time).

We’re not completely done yet, though. There are a few quick details to run through in order to now include this overlay in our EPUB.

Assuming we’ve saved our overlay as chapter_001_overlay.smil, the first step is simply to include an entry in the manifest:

<item
    id="chapter_001_overlay"
    href="chapter_001_overlay.smil"
    media-type="application/smil+xml"/>

We then need to include a media-overlay attribute on the manifest item for the corresponding content document for chapter one:

<item
    id="xchapter_001"
    href="chapter_001.xhtml"
    media-type="application/xhtml+xml"
    media-overlay="chapter_001_overlay"/>

The value of this attribute is the id we created for the overlay in the previous step.

And finally we need to add metadata to the publication file indicating the total length of the audio for each individual overlay and for the publication as a whole. For completeness, we’ll also include the name of the narrator.

<meta property="media:duration" refines="#chapter_001_overlay">0:14:43</meta>
…
<meta property="media:duration">0:23:46</meta>
<meta property="media:narrator">Stuart Wills</meta>

The refines attribute on the first meta element specifies the id of the manifest item we created for the overlay, as this is how we match the time value up to the content file it belongs to. The lack of a refines attribute on the next duration meta element indicates it contains the total time for the publication (only one can omit the refines attribute).

There’s one final metadata item left to add and then we’re done:

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

This special media:active-class meta property tells the reading system which CSS class to apply to the active element when the audio narration is being played (i.e., the highlighting to give it).