選択範囲からテキストを抽出し、TTS サービスに送信する必要があります。TTS サービスは、ストリーム URL と各単語の一連のインデックスを返し、単語の開始位置と終了位置を (時間とテキストの両方で) 示します。
ユーザーがストリームを再生するとき、読み上げられた各単語を強調表示したいと思います。これを行うには、各単語にテキスト インデックスを使用することはできません。元の HTML ノードに戻すことができないためです。したがって、toString()厳密にテキストであるテキスト インデックスを使用できないのはなぜですか。
これまでのところ、範囲オブジェクトの開始コンテナーと終了コンテナーを使用して TreeWalker を作成し、それを使用して範囲内のすべてのテキスト ノードを抽出しています。
問題:
window.getSelection().toString()表示されていないノードを本質的に無視します。これには<script>、ノード、<style>ノード、ノード付きdisplay: none;などが含まれます。TreeWalker を使用してもそうではありません。
TreeWalker でこれらすべてのノードを手動でスキップできることはわかっていますが ( alt 属性とスクリプトが含まれていない getSelection で提案されているように)、かなり複雑になる可能性があります (特に各ノードの可視性を確認する場合)。
これに入る前に、私がリンクした質問が回答されて以来、利用可能な新しいメソッドまたはライブラリがあるかどうかを尋ねたいと思いましたか?
コードをクロス ブラウザーにするつもりはなく、プレーンな Javascript を使用しています (つまり、jQuery を使用していません)。