+-
当我播放、暂停、再播放时，它不能播放，因为
SpeechSynthesis.pause()并没有使speechSynthesis.paused为真，而这应该使其为真。
我已经检查了 文件 它说
SpeechSynthesis接口的paused只读属性是一个布尔值，如果SpeechSynthesis对象处于暂停状态则返回true，如果不处于暂停状态则返回false。
意味着该行 speechSynthesis.pause() 没有将其设置为 "true"。
下面的例子。
const playButton = document.getElementById("play-button");
const pauseButton = document.getElementById("pause-button");
const stopButton = document.getElementById("stop-button");
const textInput = document.getElementById("text");
const speedInput = document.getElementById("speed");
const status = document.getElementById("status");
let currentCharacter;
const utterance = new SpeechSynthesisUtterance();
utterance.addEventListener("end", () => {
textInput.disabled = false;
})
utterance.addEventListener("bounary", e => {
currentCharacter = e.charIndex;
})
playButton.addEventListener("click", () => {
playText(textInput.value);
})
pauseButton.addEventListener("click", pauseText);
stopButton.addEventListener("click", stopText);
speedInput.addEventListener("input", () => {
stopText();
playText(utterance.text.substring(currentCharacter))
})
function playText(text) {
if (speechSynthesis.paused && speechSynthesis.speaking) {
status.innerHTML = "resumed";
return speechSynthesis.resume()
}
status.innerHTML = "played";
if (speechSynthesis.speaking) return
utterance.text = text;
utterance.rate = speedInput.value || 1;
textInput.disabled = true;
speechSynthesis.speak(utterance);
}
function pauseText() {
if (speechSynthesis.speaking) {
status.innerHTML = "paused";
speechSynthesis.pause() //
}
}
function stopText() {
status.innerHTML = "stopped";
speechSynthesis.resume()
speechSynthesis.cancel()
}body {
width: 90%;
margin: 0 auto;
margin-top: 1rem;
}
#text {
width: 100%;
height: 50vh;
}<textarea name="text" id="text"></textarea>
<label for="speed">Speed</label>
<input type="number" name="speed" id="speed" min=".5" max="3" step=".5" value="1">
<button id="play-button">Play</button>
<button id="pause-button">Pause</button>
<button id="stop-button">Stop</button>
<span id="status"></span>
0
投票
投票
你可以使用这段代码来查看点击播放、暂停和停止时的状态。当相关事件被触发时，状态就会更新。例如，当你点击 "播放 "时，状态会在点击时显示一次，在启动事件被触发时再次显示。
你会发现这两者之间是有区别的，例如当你点击暂停时，暂停标志是假的，直到片刻后的onpause事件被触发。
考虑到chrome的问题和时间问题，我建议你保持简单，有开始、暂停、继续和取消按钮，并有自己的功能。
const showStatus = (btn) => {
const statuses = document.createTextNode(`
${btn}:
Pending: ${speechSynthesis.pending},
Speaking: ${speechSynthesis.speaking},
Paused: ${speechSynthesis.paused}`);
const p = document.createElement('p');
p.appendChild(statuses);
data.insertBefore(p, data.firstElementChild);
};
play.addEventListener("click", (e) => {
const u = new SpeechSynthesisUtterance(
"1 2 3 4 5 6 7 8 9 10 11 12 13 14 15"
);
speechSynthesis.speak(u);
showStatus(e.target.innerText);
u.onstart = () => showStatus('On start');
u.onpause = () => showStatus('On pause');
u.onresume = () => showStatus('On resume');
u.onend = () => showStatus('On end');
u.onerror = (err) => showStatus('On error ' + err);
});
pause.addEventListener("click", (e) => {
speechSynthesis.pause();
showStatus(e.target.innerText);
});
resume.addEventListener("click", (e) => {
speechSynthesis.resume();
showStatus(e.target.innerText);
});
ssCancel.addEventListener('click', (e) => {
speechSynthesis.cancel();
showStatus(e.target.innerText);
});
showStatus('Upon load');<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="resume">Resume</button>
<button id="ssCancel">Cancel</button>
<div id="data"></div>