当我播放并暂停并再次播放时,它不会播放,因为
speechSynthesis.pause()不能使speechSynthesis.paused为真,这应该使它为真。
我已经检查了docs上显示的
SpeechSynthesis接口的已暂停只读属性是一个布尔值,如果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 :(得分:0)
单击播放,暂停和停止后,您可以使用此代码查看状态。然后,在触发相关事件时更新雕像。即当您单击“播放”时,状态会在单击时显示一次,在触发onstart事件时会再次显示。
例如,当您单击“暂停”时,您会发现这两者之间存在差异。暂停标志为假,直到稍后触发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>