speechSynthesis.pause() 应该返回 true 但返回 false

Question

When I play and pause and play again it does not play because

speechSynthesis.pause() does not make speechSynthesis.paused true which should make it true.

I've checked the docs it says

The paused read-only property of the SpeechSynthesis interface is a Boolean that returns true if the SpeechSynthesis object is in a paused state, or false if not.

meaning the line speechSynthesis.pause() didnt set it to true

Sample below:

 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>

Answer 1

You can use this code to see the statuses upon clicking Play, Pause and Stop. The statues are then updated when the relevent event is triggered. Ie when you click Play the statuses are shown once upon clicking and again upon the onstart event being fired.

You'll see that there is a difference between these two for example when you click Pause the paused flag is false until the onpause event is triggered a moment later.

Given that chrome has problems and there are timing issues I suggest that you keep it simple and have start, pause, resume and cancel buttons with their own functions.

 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>

Answer 2

I had the same problem. My reading of the docs did not coincide with what I experienced. I ended up simply setting my own variable to keep track of whether there is a pause. Of note, the speaking property can be used to find if the utterance has not been started, or has finished. That coupled with my own variable keeping track of what to do when the user presses the pause button allowed me to get a stop, play and pause feature.

Edit: This works for me in Edge Browser. I plan to update after I try in others.

 const synth = window.speechSynthesis; let myPauseProperty = false; let utterThis; function stop() { myPauseProperty = false; synth.cancel(utterThis); } function play() { if ((myPauseProperty === true)&&(synth.speaking===true)) {//alredy started not ended //speech somewhere in the middle, and paused, needs resumed synth.resume(); myPauseProperty=false; } else if (synth.speaking===false) { //not started or has ended, user expects to start play utterThis = new SpeechSynthesisUtterance(document.getElementById("text-area").value); synth.speak(utterThis); myPauseProperty=false; } } function pause() { if ((myPauseProperty === true)&&(synth.speaking===true)) { //speech somewhere in middle of phrase and paused, user wants unpause synth.resume(); myPauseProperty = false; } else if ((myPauseProperty === false)&&(synth.speaking===true)) { //speech somewhere in middle of phrase and unpaused, user wants pause synth.pause() myPauseProperty=true; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <textarea id="text-area">Put your text here and try playing;</textarea> <nav> <button onclick="stop();">[]</button> <button onclick="play();">|></button> <button onclick="pause();">||</button> </nav> </body> </html>