Mary TTS使用HTML / JavaScript和PHP

Question

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

我想在我的网站上使用Mary TTS来大声朗读文本，用户可以在输入字段中添加文本，并在GUI窗口中生成输出，而不使用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，那么获取文字转语音音频文件的网址为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实例的实际网址。