如何让我的网络浏览器以编程方式说话？

Question

是否可以让网站以编程方式向用户说出欢迎信息？

假设我想在成功登录我的网站时用音频消息问候用户。我知道我可以录制问候语（即MP3），然后播放，但我希望能够以编程方式执行此操作，因为所有用户的名称都会有所不同。

例如，我可能想在John Doe登录时说Welcome, John Doe。

我怎么能用普通的javascript做到这一点？

注意：这不适用于生产系统，而是用作较大的UX实验的较小部分。

Answer 1

要让window.speechSynthesis.speak()在Chromium浏览器中呈现音频输出，用户需要安装speech-dispatcher并使用--enable-speech-dispatcher标志启动浏览器。

• How to use Web Speech API at chromium?

需要调用

onvoiceschanged事件处理程序和window.speech.synthesis.getVoices()来填充可用语音列表。 API并不简单;可能需要为.getVoices()对象调用两次 SpeechSynthesisVoice来填充.getVoices()返回的数组。

请注意，.speak()的调用可能会被放入队列，不会呈现为音频输出，这不是立即显现的;调用window.speechSynthesis.cancel()清除队列，然后可以意外地呈现音频输出。

• speechSynthesis.getVoices() is empty array in Chromium Fedora

然后，您可以使用window.speechSynthesis.speak()。

现在已经尝试了一段时间，默认情况下在Chromium浏览器中为* nix启用SSML解析;不使用外部网络服务，需要某种形式的EUA或不像啤酒那样免费。

已联系的实体列表和要求实现这一目标的问题非常冗长，例如

• SSML parsing implementation at browsers

• How to extract SSML parsing code of espeak to implement SSML parsing at SpeechSynthesisUtterance?

• How to set SSML parsing to on at user configuration file?

• Why hasn't Issue 88072 and Issue 795371 been answered? Are Internals>SpeechSynthesis and Blink>Speech dead?

Firefox * * nix也不解析SSML。

也许广大用户对此感兴趣，我们最终可以默认启用此功能。

虽然在不使用外部Web服务的情况下有SSML解析的解决方法;下面的第一个链接仍未得到答复;虽然包含使用shell_exec()之后使用$_POST调用二进制文件到本地服务器

的PHP代码

• How to programmatically send a unix socket command to a system server autospawned by browser or convert JavaScript to C++ souce code for Chromium?

• SpeechSynthesisSSMLParser

注意，当前的Web Speech API实现存在一些错误，特别是在volume更改SpeechSynthesisUtterance属性对Chromium和Firefox的音频输出没有影响

• Setting SpeechSynthesisUtterance.volume does not change volume of audio output of speechSynthesis.speak()

• Setting SpeechSynthesisUtterance.volume does not change volume of audio output of speechSynthesis.speak()

使用.pause()和.resume()时也存在一个错误，在尝试以编程方式解析SSML的<break>元素时遇到错误

• "speak speak slash" is audio output of .speak() following two calls to .speak(), .pause() and .resume()

使用显然已失效的Web Speech API的替代方法是speak.js，它是通过将espeak移植到JavaScript或meSpeak.js（speak.js的分支）创建的。现在正在积极维护espeak-ng，例如使用meSpeak.js

的修改版本

• generate audio file with W3C Web Speech API

或使用提供反映单词

的语音文件的在线词典

• How to create or convert text to audio at chromium browser?

有趣的是，在发帖后回答＆＃34; gstatic＆＃34; ＆＃34;词典＆＃34;不再提供音频文件。

幸运的是，我们有

• mozilla/voice-web

  

这是一个用于收集演讲捐赠的网络，Android和iOS应用   共同语音项目。

非常活跃。

我们也可以在Chromium / Chrome和Firefox上使用Native Message来调用与本机shell的交互并调用二进制文件

• How to parse JSON from stdin at Chrome Native Messaging host?

• How to parse JSON from stdin at Native Messaging host?

• Chrome Native Messaging throwing error when sending a base64 string to client

此代码使用Native Messaging

进行最少的修改，从而达到预期的结果

• Chrome Native messaging with PHP

或作为一项重大措施，更改二进制文件

• How to set options of commands called by browser?

（意见，事后支持）

语音合成技术有一个庞大的网络服务市场，无论是在其生成阶段（＆＃34; [L] yrebird＆＃34;）还是认识 - 获取利润 ieg，＆ ＃34 *的LexA＆＃34 ;; ＆＃34; *奥利＆＃34 ;; （* bm）＆＃34; * atson * luemix＆＃34 ;; （* oogle）＆＃34; * ctions＆＃34 ;;等

开源开发人员需要继续努力在开源浏览器中维护开源（FOSS; FLOSS）语音合成技术。如果我们希望默认情况下在浏览器中实现这些技术，开源开发人员必须编写代码才能实现这一点。

Answer 2

这可以通过SpeechSynthesisUtterance实现  Web Speech API的界面。有关此here的更多信息。

以下javascript在Chrome中执行时会显示“欢迎John Doe”。确保音量调高！

const message = new SpeechSynthesisUtterance('Welcome, John Doe'); 
window.speechSynthesis.speak(message);

Web Speech API还提供语音识别界面。以下代码将语音字词打印到浏览器控制台。

const recognition = new webkitSpeechRecognition();
recognition.onresult = function(event) {
  for (let i = event.resultIndex; i < event.results.length; ++i) {
    console.log(event.results[i][0].transcript); 
  }
}

要开始捕捉语音，请运行recognition.start();
要停止捕获语音，请运行recognition.stop();

鉴于这是实验性技术，它并不完美，并不是所有浏览器和版本都支持它。查看browser compatibility table以获取支持的浏览器和版本。