Firefox Android 上的未定义 SpeechSynthUtterance 错误

问题描述

背景

我正在创建一个简单的 SpeechSynth 组件，它可以在大多数设备上正常运行，但不知何故在 FireFox android 上，SpeechSynthUtterance 将调度 onerror 事件而没有 error property defined on the event。>

声音已加载；这不是未定义声音的问题。由于错误只是 undefined。

复制

const MAX_LOAD_VOICES = 5
let loadVoiceCount = 0

const loadVoices = (callback) => {
  const speech = window.speechSynthesis
  const voices = speech.getVoices()

  if (voices.length > 0) {
    return callback({ speech,voices })
  }

  if (++loadVoiceCount > MAX_LOAD_VOICES) {
    throw new Error(`Failed to load speech synthesis voices,after ${loadVoiceCount} retries.`)
  }

  return setTimeout(() => loadVoices(callback),100)
}

loadVoices(({ speech,voices }) => {
  const utterance = new window.SpeechSynthesisUtterance('Hello world')
  utterance.voice = voices[0] // assume this is the voice we want
  utterance.onend = function () {
    console.log('SpeechSynth successfully ended')
  }

  utterance.onerror = function (event) {
    console.log('SpeechSynth Failed')
    console.debug(event)
  }
  
  speech.speak(utterance)
})

预期

这个脚本应该可以正常运行（试试你的浏览器）

在 Firefox Android 上的结果

utterance.onerror 事件将在未定义错误且未说出文本的情况下触发。

记录的错误事件 (console.debug(event)) 的输出：

{
bubbles: false
cancelBubble: false
cancelable: false
charIndex: 0
charLength: null
composed: false
currentTarget: null
defaultPrevented: false
elapsedtime: 0
eventPhase: 0
explicitOriginalTarget: SpeechSynthesisUtterance { text: "Hello world",volume: 1,rate: 1,… }
isTrusted: true
name: ""
originalTarget: SpeechSynthesisUtterance { text: "Hello world",… }
returnValue: true
srcElement: SpeechSynthesisUtterance { text: "Hello world",… }
target: SpeechSynthesisUtterance { text: "Hello world",… }
timeStamp: 2591
type: "error"
utterance: SpeechSynthesisUtterance { text: "Hello world",… }
<get isTrusted()>: function isTrusted()
<prototye>: SpeechSynthesisEventPrototype { utterance: Getter,charIndex: Getter,charLength: Getter,… }
}

browser compatibility 也应该没有问题，因为我在 Android 11 上运行 FF Mobile 88.0.1

我是否遗漏了一些“特别”的东西来创建话语？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）