Init view TTS with text segmentation granularity

in order to support more TTS backends
johnfactotum · Jan 9, 2025 · 3bdbd3d · 3bdbd3d
1 parent fcc449c
commit 3bdbd3d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/text-walker.js b/text-walker.js
@@ -32,7 +32,7 @@ export const textWalker = function* (x, func) {
     const walker = document.createTreeWalker(root, filter, { acceptNode })
     const walk = x.commonAncestorContainer ? walkRange : walkDocument
     const nodes = walk(x, walker)
-    const strs = nodes.map(node => node.nodeValue)
+    const strs = nodes.map(node => node.nodeValue ?? '')
     const makeRange = (startIndex, startOffset, endIndex, endOffset) => {
         const range = document.createRange()
         range.setStart(nodes[startIndex], startOffset)

diff --git a/tts.js b/tts.js
@@ -25,7 +25,7 @@ const getSegmenter = (lang = 'en', granularity = 'word') => {
     const segmenter = new Intl.Segmenter(lang, { granularity })
     const granularityIsWord = granularity === 'word'
     return function* (strs, makeRange) {
-        const str = strs.join('')
+        const str = strs.join('').replace(/\r\n/g, '  ').replace(/\r/g, ' ').replace(/\n/g, ' ')
         let name = 0
         let strIndex = -1
         let sum = 0
@@ -34,10 +34,10 @@ const getSegmenter = (lang = 'en', granularity = 'word') => {
             while (sum <= index) sum += strs[++strIndex].length
             const startIndex = strIndex
             const startOffset = index - (sum - strs[strIndex].length)
-            const end = index + segment.length
+            const end = index + segment.length - 1
             if (end < str.length) while (sum <= end) sum += strs[++strIndex].length
             const endIndex = strIndex
-            const endOffset = end - (sum - strs[strIndex].length)
+            const endOffset = end - (sum - strs[strIndex].length) + 1
             yield [(name++).toString(),
                 makeRange(startIndex, startOffset, endIndex, endOffset)]
         }
@@ -207,11 +207,11 @@ export class TTS {
     #ranges
     #lastMark
     #serializer = new XMLSerializer()
-    constructor(doc, textWalker, highlight) {
+    constructor(doc, textWalker, highlight, granularity) {
         this.doc = doc
         this.highlight = highlight
         this.#list = new ListIterator(getBlocks(doc), range => {
-            const { entries, ssml } = getFragmentWithMarks(range, textWalker)
+            const { entries, ssml } = getFragmentWithMarks(range, textWalker, granularity)
             this.#ranges = new Map(entries)
             return [ssml, range]
         })

diff --git a/view.js b/view.js
@@ -577,12 +577,12 @@ export class View extends HTMLElement {
             for (const item of list) this.deleteAnnotation(item)
         this.#searchResults.clear()
     }
-    async initTTS() {
+    async initTTS(granularity = 'word') {
         const doc = this.renderer.getContents()[0].doc
         if (this.tts && this.tts.doc === doc) return
         const { TTS } = await import('./tts.js')
         this.tts = new TTS(doc, textWalker, range =>
-            this.renderer.scrollToAnchor(range, true))
+            this.renderer.scrollToAnchor(range, true), granularity)
     }
     startMediaOverlay() {
         const { index } = this.renderer.getContents()[0]