Creating readalong editions

Process

Starting with a well formed fixed epub.

1. Create transcript
2. Separate audio into pages (name them page_1.mp3, page_2.mp3 etc.)
3. Use the Gentle app to create csv files with timecodes. You will need the split audio files and a transcript.
4. Use convert_to_smil.py script to create smil files from csv's. Remember to grab the metadata and total time.
5. Run the convert_add_word_ids_rev.py script to add spans to words in xhmtl files.
6. add audio files to a folder called audio
7. add smil files to a folder called smil
8. edit content.opf (see below)
9. add media-overlay css

General Notes

• Gentle https://github.com/strob/gentle
• don't add any spaces or formatting in the generated html as it screws with the positioning (because it's a fixed epub)
• Montreal Forced Aligner (supposedly better but more complicated) https://chenzixu.rbind.io/resources/1forcedalignment/fa6/

transcriber

look at Scriberr https://scriberr.app/

• http://192.168.1.3:8181/

css file

Add to the css file. Underline is optional

.-epub-media-overlay-active {
    color: #FF0070;
    text-decoration: underline !important;
}

Background version

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

opf file

contributor

    <dc:contributor id="nrt">Elizabeth Klett</dc:contributor>
    <meta refines="#nrt" property="role" scheme="marc:relators">nrt</meta>
    <meta refines="#nrt" property="file-as">Klett, Elizabeth</meta>```

### Narrator
` <meta property="media:narrator">Elizabeth Klett</meta>`

### <metadata\>
Add the following metadata (at the end of the metadata section).  List all smil files with the correct duration. *You should get this from the script output.*

<meta property="media:active-class">-epub-media-overlay-active</meta>
<meta property="media:duration">01:01.282</meta>
<meta property="media:duration" refines="#titlepage.smil">0:00.83</meta>
<meta property="media:duration" refines="#page_002.smil">0:29.484</meta>

### <manifest\>
Ensure that every xhtml page that has  a media overlay (and associated smil file) has ` media-overlay="titlepage.smil"` added to the end of its manifest item.

<item id="titlepage.xhtml" href="titlepage.xhtml" media-type="application/xhtml+xml" media-overlay="titlepage.smil"/>
<item id="page_3" href="page_2.xhtml" media-type="application/xhtml+xml" media-overlay="page_2.smil"/>

Make sure smil and mp3/mp4 files are properly added to manifest:

<item id="titlepage.mp3" href="audio/titlepage.mp3" media-type="audio/mp4"/>
<item id="page_2.smil" href="smil/page_2.smil" media-type="application/smil+xml"/>

```