Add TTS

Add function to convert current page to SSML, with `<mark>`s inserted
using `Intl.segmenter`.

The actual speaking is up to the reader, who should call
`hightlightSpeechMark()` upon mark events.

view.js

@@ -90,6 +90,7 @@ export class View extends HTMLElement {
     #tocProgress
     #pageProgress
     #searchResults = new Map()
+    #speechRanges
     isFixedLayout = false
     lastLocation
     history = new History()
@@ -408,6 +409,19 @@ export class View extends HTMLElement {
             for (const item of list) this.deleteAnnotation(item)
         this.#searchResults.clear()
     }
+    async speak(granularity) {
+        const { insertMarks, toSSML } = await import('./tts.js')
+        const doc = this.renderer.getContents()[0].doc
+        const { doc: markedDoc, ranges } = insertMarks(textWalker, doc, granularity)
+        this.#speechRanges = new Map(ranges)
+        const ssml = toSSML(markedDoc)
+        return new XMLSerializer().serializeToString(ssml)
+    }
+    hightlightSpeechMark(name) {
+        const range = this.#speechRanges.get(name)
+        if (range) this.renderer.scrollToAnchor(range, true)
+        else console.warn('Mark not found')
+    }
 }
 
 customElements.define('foliate-view', View)