玛丽 TTS 与 HTML/JavaScript 和 PHP

Question

我在 Windows（和 Linux 台计算机）上安装了 Mary TTS（5.1.2 版）。我启动了 Mary TTS 服务器和 Mary TTS 客户端，并在 GUI 中进行了一些文本到音频转换的试验 window（太棒了）。

我想在我的网站上使用 Mary TTS 大声朗读文本，用户可以在输入字段中添加文本并像在 GUI window 中一样生成输出，而无需使用 java客户.

例如：

<input type="text" id="text">
<button onclick="play('text');">Speak it</button>

<script>
function play(id){
    var text = document.getElementById(id).value;
    var a = new Audio(text);
        a.play();
    }
</script>

刚开始..我不知道如何在 HTML/JavaScript 和 PHP 中做到这一点？

Answer 1

第 1 步。在服务器上托管 MaryTTS

我写了 marytts-http 来包装 MaryTTS，因此它很容易部署到 Heroku，尽管你也可以将它部署到其他服务器。

首先您需要一个 Heroku 帐户，然后安装它们的 toolbelt 和运行 heroku login.

之后你可以像这样部署 marytts-http 到 Heroku：

git clone https://github.com/draffensperger/marytts-http
cd marytts-http
heroku create
git push heroku master

第 2 步。在您的网站中使用托管的 MaryTTS 实例

Heroku 将为您在上面创建的 marytts-http 实例命名，稍后您可以在 Heroku 仪表板上更改。假设您的实例名称是 my-marytts，那么获取文本转语音音频文件的 URL 将是 my-marytts.herokuapp.com/?text=Hello（只需指定 text 查询参数） .

要在您的网站上嵌入音频，您应该使用 <audio> 标签，例如：

<audio src="my-marytts.herokuapp.com/?text=Hello" autoplay></audio>

autoplay 使其在加载元素时启动音频。因此，在您的情况下，您可以做的是在用户单击按钮后动态添加 <audio> 元素，例如：

<input type="text" id="text">
<button onclick="play('text');">Speak it</button>

<span id="audio-container" style="display:none;"></span>

<script>
function play(id) {
  var maryttsHost = 'https://example-mary-tts.herokuapp.com'
  var text = document.getElementById(id).value;
  var container = document.getElementById("audio-container");
  var audioSrc = maryttsHost + '/?text=' + encodeURIComponent(text);
  container.innerHTML = '<audio src="' + audioSrc + '" autoplay></audio>';
}
</script>

您需要更改上面的 maryttsHost 以匹配 Heroku 上 marytts-http 实例的实际 URL。

玛丽 TTS 与 HTML/JavaScript 和 PHP

Mary TTS with HTML/JavaScript and PHP

text-to-speech

speech-synthesis

marytts

第 1 步。在服务器上托管 MaryTTS

第 2 步。在您的网站中使用托管的 MaryTTS 实例