Transform EPUB with Media Overlays into a series of HTML files for reading directly in the browser.
A typical conversion creates the following files (see an example fileset):
- HTML files with the original contents, plus reading interface controls and links to the TOC, Previous, and Next pages.
- An About page containing publication metainformation
- A TOC based on the original EPUB Nav Document
Media Overlays conversion adds the following:
- Creation of one audio file per HTML page
- Embedding that audio file in the HTML page
- A VTT file containing the phrase timing information for that audio file
September 2024
- VTT sync format updated to stay current with latest Synchronized Media in Publications recommendation
- Chapters can play through (#3) Read about autoplay
- An experimental sample in Arabic was generated, though it's not online as the files are a bit too big for github. Will try to work around or host elsewhere.
- CSS Custom Highlight API used everywhere that text has to be highlighted (playback highlight and search results). This is a way to support sub-element highlighting (e.g. word-level) without marking up the text with IDs everywhere.
- Bugs were fixed: #32, #8
Viewing these requires an up to date browser, specifically because they use the CSS Custom Highlight API and autoplay permissions.
As of now (Sept 2024), the latest of Chrome, Firefox, and Safari perform reasonably; though in Firefox, the highlight API is experimental right now so support has to be enabled by setting a preference (see their docs for details).
To autoplay the contents from chapter to chapter, go to the page and then go to "site settings" in your browser. Under "audio", say "allow". You only have to do this once for the whole demo site (per domain).
These demos were created using this conversion script.
| Feature | Basic | JS-enhanced |
|---|---|---|
| Spine navigation | Forward and back through the spine documents with links (shown as arrows) | (same) |
| TOC | TOC link opens nav.html |
TOC loads in sidebar |
| Page list | Page list is within nav.html, use landmarks navigation or click the in-page link at top |
Page list loads in sidebar and has go-to-page controls |
| Search | Not available | Full text search available from sidebar |
| Publication info | Info link opens about.html, containing publication info |
About page loads in sidebar instead |
| Keyboard shortcuts | Not available | Available (see help for details) |
| Help | Opens in new page | (same) |
| Settings | Not available | Change size, theme, playback rate, page number announcements |
| Theme | Match OS dark theme preference by default | Adds ability to turn on/off |
| Bookmarks | Bookmark any heading using your browser | (same) |
| Audio support | Play embedded audio for the page with native HTML controls | Adds synchronized highlighting and custom controls, including phrase navigation and control over announcing page numbers |
A few things (navigation document consistency across publications; colors in stylesheets or things marked !important) were adjusted manually in the EPUB source; this is, after all, just a prototype. But these aspects can and will be automated in the future.
Generate a set of HTML pages:
- Target DAISY 2.02 content which has been automatically converted to EPUB 3
- Use an HTML template prepopulated with the basic structure of our pages (intra-publication links, audio if applicable)
- For each EPUB HTML spine item (except for the TOC), create an HTML file from our template
- Move the contents of the source file's
<body>into the template's<main>element. - Generate a navigation file based on the EPUB navigation document
- Generate an About file containing publication information
- The cover page is renamed
index.htmland can act as an entry page (though a user can enter the publication from any page) - Add links to each heading for easy bookmarking
Add javascript enhancements:
- Sidebar with table of contents, page list, search, and about tabs
- Settings panel to control visual adjustments and audio preferences
- Audio playback with synchronized highlighting
- Keyboard shortcuts
What this isn't:
- An authoring format definition
- A generic "player" to apply to any EPUB
Advances in these areas would make this project better.
-
Coordinating screen reader focus with browser text highlights. https://stackoverflow.com/questions/31921688/moving-the-cursor-in-a-screen-reader
Use case: user wants to stop synchronized playback and use their screen reader to explore at a word or character level. -
Web packaging https://github.com/WICG/webpackage
Use case: package material for downloadable/offline distribution
- Use the Shadow DOM for the interface elements and keep the document as plain or close to the original as possible
- Try the CSS Highlights API to similarly stay out of the document's way