使用Javascript计算从计算机时钟转换为语音的数字

Question

我正在尝试制作一个脚本，该脚本可以使用谷歌文本到语音(或类似内容(在网站上无限期地计数数字(一、二、三…一零、一…(。

它将使用Javascript和计算机时钟，而不是让程序在主机服务器上连续运行。

有人能帮我开始吗？

感谢

Answer 1

这里有一个普通的JS/HTML版本：

let count = 1
let timer = null
let controller = new AbortController()
const synth = window.speechSynthesis
const utter = new SpeechSynthesisUtterance(count)
const text = document.getElementById('text')
const onUtterEnd = () => {
count = count + 1
utter.text = count
text.innerHTML = `<mark>${count}</mark>`
synth.speak(utter)
}
const start = () => {
text.innerHTML = `<mark>${count}</mark>`
controller = new AbortController()
utter.addEventListener('end', onUtterEnd, { signal: controller.signal })
synth.speak(utter)
}
const stop = () => {
controller.abort()
synth.cancel()
}
document.getElementById('start').addEventListener('click', start)
document.getElementById('stop').addEventListener('click', stop)

<button id="start">start</button>
<button id="stop">stop</button>
<p id="text"></p>

如果您使用React，则可以使用tts-react。以下是一个示例(更改counter逻辑以匹配您喜欢的计数方式(：

import { useTts } from 'tts-react'
import { useState, useEffect } from 'react'
const SpeakCountedNumbers = () => {
const [count, setCount] = useState(1)
const { ttsChildren, play } = useTts({
children: count,
rate: 0.9,
markTextAsSpoken: true,
onEnd: useCallback(() => {
setCount((prev) => prev + 1)
}, [])
})
useEffect(() => {
play()
}, [count, play])
return <>{ttsChildren}</>
}

这将呈现数字序列1、2、3。。。同时说出每个数字并在文档中突出显示。

请在Codesandbox上查看。某些浏览器可能要求您在音频开始播放之前单击文档(或以某种方式与文档交互(，例如Chrome。