再试TTS：朗读时同步选中文本
本帖最后由 马黑黑 于 2022-6-26 10:54 编辑 <br /><br /><style>.mama { margin: auto; width: fit-content; }
.mama textarea { padding: 12px; width: 600px; height: 400px; outline: none; font-size: 1.2em; }
.mama p { margin: 0; padding: 6px 0; text-align: center; }
.mama input { outline: none; }
</style>
<p>测试中，待朗读的文本需要标点符号！<br><br></p>
<div class="mama">
<p><textarea id="textarea" placeholder="输入待朗读文本"></textarea></p>
<p><input id="read" type="button" value=" 朗读 " /> </p>
</div>
<script>
let textarea = document.querySelector('#textarea'),
read = document.querySelector('#read');
let synth = window.speechSynthesis,
speech = new SpeechSynthesisUtterance();
let reg = /[,\.!\?\(\)，。！？（）]/g; //断句符号
let idx = 0, total = 0, start = 0; ar = [], bdAr = []; //文本处理相关变量
//朗读按钮
read.onclick = function() {
ar.length = 0;
idx = 0;
start = 0;
let reg = /[,\.:!\?，。：！？]/g;
ar = textarea.value.split(reg);
bdAr = textarea.value.match(reg);
total = ar.length;
readText();
read.disabled = true;
}
//结束监听：接力朗读
speech.addEventListener('end', () => {
if(idx < total - 1) readText();
if(idx == total - 1 ) read.disabled = false;
})
//朗读+文本选中
function readText() {
console.log(idx,ar);
let current = ar + bdAr;
let end = start + current.length;
textarea.setSelectionRange(start,end);
textarea.focus();
speech.text = ar;
synth.speak(speech);
start += current.length;
idx ++;
}
</script>
有意思， 每一句都在标点的地方断句，然后这句就是被选中的。 特地把最后一句去掉标点，结果那句就直接被扔掉了，也不阅读了，也不标注了{:4_189:} 这个不能分辨多音字，我转的一段里有上下联几个字，被都成了zhang下联，读错音了{:4_173:} 这个评分后一定要刷新才可以，我前面忘记这点，放一段话怎么都不读，后来才想起来这点{:4_173:} 红影 发表于 2022-6-26 15:56
这个评分后一定要刷新才可以，我前面忘记这点，放一段话怎么都不读，后来才想起来这点
很多JS的运行都受到评分所用的的异步操作影响 红影 发表于 2022-6-26 15:53
特地把最后一句去掉标点，结果那句就直接被扔掉了，也不阅读了，也不标注了
对，这个我是依据标点符号断句的 马黑黑 发表于 2022-6-26 16:55
很多JS的运行都受到评分所用的的异步操作影响
是啊，我前面忘了这点，结果试了半天试不出{:4_173:} 马黑黑 发表于 2022-6-26 16:56
对，这个我是依据标点符号断句的
原来是这样。试过才知道的{:4_173:} 红影 发表于 2022-6-26 22:04
原来是这样。试过才知道的
玩玩的，有空弄个选中文本就开读的 红影 发表于 2022-6-26 22:04
是啊，我前面忘了这点，结果试了半天试不出
凡评分都习惯按下f5 马黑黑 发表于 2022-6-26 22:18
玩玩的，有空弄个选中文本就开读的
早上来已经看到了，黑黑厉害，想弄什么就弄什么{:4_199:} 马黑黑 发表于 2022-6-26 22:19
凡评分都习惯按下f5
这不是忘了么，下回会记得了{:4_173:} 红影 发表于 2022-6-27 11:00
这不是忘了么，下回会记得了
木有办法 红影 发表于 2022-6-27 10:59
早上来已经看到了，黑黑厉害，想弄什么就弄什么
没那么夸张 马黑黑 发表于 2022-6-27 12:20
木有办法
没什么，多刷新就是了{:4_204:} 马黑黑 发表于 2022-6-27 12:20
没那么夸张
的确是你想到的都弄出来了啊。 红影 发表于 2022-6-27 20:38
的确是你想到的都弄出来了啊。
一般我只想那些可能可以弄出来的，不敢想那些不可能弄出来的 马黑黑 发表于 2022-6-27 20:39
一般我只想那些可能可以弄出来的，不敢想那些不可能弄出来的
至少你知道哪些可以哪些不可以，我连这也不知道，完全糊里糊涂{:4_173:} 红影 发表于 2022-6-27 21:58
至少你知道哪些可以哪些不可以，我连这也不知道，完全糊里糊涂
我研究过的。之前，TTS还不怎么流行的时候，还做过一个编辑器，输入每一个字都可以朗读