Question

我需要在JavaScript中播放 Google文字转语音。
我们的想法是使用网络服务：

http://translate.google.com/translate_tts?tl=en&q=This%20is%20just%20a%20test

并在certian行动中播放，例如点击一下按钮。

但它似乎不像加载普通的wav / mp3文件一样：

<audio id="audiotag1" src="audio/example.wav" preload="auto"></audio>

<script type="text/javascript">
    function play() {
        document.getElementById('audiotag1').play();
    }
</script>

我该怎么做？

Answer 1

现在另一个选项可能是HTML5 text to speech，它位于Chrome 33+和many others中。

以下是一个示例：

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

有了这个，也许您根本不需要使用Web服务。

Answer 2

以下是我找到的代码段：

var audio = new Audio();
audio.src ='http://translate.google.com/translate_tts?ie=utf-8&tl=en&q=Hello%20World.';
audio.play();

Answer 3

您可以将SpeechSynthesisUtterance与[{3}}：

等功能结合使用

function say(m) {
  var msg = new SpeechSynthesisUtterance();
  var voices = window.speechSynthesis.getVoices();
  msg.voice = voices[10];
  msg.voiceURI = "native";
  msg.volume = 1;
  msg.rate = 1;
  msg.pitch = 0.8;
  msg.text = m;
  msg.lang = 'en-US';
  speechSynthesis.speak(msg);
}

然后您只需在使用时调用say(msg)。

更新：查看Google的开发者博客，该博客是关于语音驱动的Web应用程序Web Speech API简介。

Answer 4

响应声音非常简单。只需包括js和voila！

<groupId>com.andrewtech.discord.skill</groupId>
<artifactId>AndrewTechBot</artifactId>
<version>1.0-SNAPSHOT</version>

<build>
    <sourceDirectory>src</sourceDirectory>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-jar-plugin</artifactId>
            <version>2.4</version>
            <configuration>
                <archive>
                    <manifest>
                        <mainClass>
                            main.java.com.andrewtech.discord.skill.AndrewTechSpeechletRequestStream
                        </mainClass>
                    </manifest>
                </archive>
            </configuration>
        </plugin>
        <plugin>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.3</version>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>

            </configuration>
        </plugin>
        <plugin>
            <artifactId>maven-assembly-plugin</artifactId>
            <configuration>
                <archive>
                    <manifest>
                        <mainClass>
                            main.java.com.andrewtech.discord.skill.AndrewTechSpeechletRequestStream
                        </mainClass>
                    </manifest>
                </archive>
                <descriptorRefs>
                    <descriptorRef>jar-with-dependencies</descriptorRef>
                </descriptorRefs>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-shade-plugin</artifactId>
            <version>2.1</version>
            <configuration>
                <createDependencyReducedPom>false</createDependencyReducedPom>
            </configuration>
            <executions>
                <execution>
                    <phase>package</phase>
                    <goals>
                        <goal>shade</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
    </plugins>
    <resources>
        <resource>
            <targetPath>.</targetPath>
            <filtering>true</filtering>
            <directory>${basedir}/</directory>
            <includes>
                <include>*.yml</include>
            </includes>
        </resource>
    </resources>
</build>

<repositories>
    <repository>
        <id>bungeecord-repo</id>
        <url>https://oss.sonatype.org/content/repositories/snapshots</url>
    </repository>
    <repository>
        <id>jcenter</id>
        <name>jcenter-bintray</name>
        <url>http://jcenter.bintray.com</url>
    </repository>
    <repository>
        <id>jitpack.io</id>
        <url>https://jitpack.io</url>
    </repository>
    <repository>
        <id>mvnrepository.com</id>
        <url>mvnrepository.com</url>
    </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>net.dv8tion</groupId>
        <artifactId>JDA</artifactId>
        <version>LATEST</version>
        <scope>compile</scope>
    </dependency>
    <dependency>
        <groupId>com.google.apis</groupId>
        <artifactId>google-api-services-customsearch</artifactId>
        <version>v1-rev55-1.22.0</version>
        <scope>compile</scope>
    </dependency>
    <dependency>
        <groupId>org.apache.httpcomponents</groupId>
        <artifactId>httpclient</artifactId>
        <version>LATEST</version>
        <scope>compile</scope>
    </dependency>
    <dependency>
        <groupId>com.mashape.unirest</groupId>
        <artifactId>unirest-java</artifactId>
        <version>1.4.9</version>
        <scope>compile</scope>
    </dependency>
    <dependency>
        <groupId>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
        <version>2.8.1</version>
    </dependency>
    <dependency>
        <groupId>org.mongodb</groupId>
        <artifactId>mongo-java-driver</artifactId>
        <version>LATEST</version>
    </dependency>
    <dependency>
        <!--<groupId>com.paypal.sdk</groupId>-->
        <!--<artifactId>invoicesdk</artifactId>-->
        <!--<version>LATEST</version>-->
        <groupId>com.paypal.sdk</groupId>
        <artifactId>rest-api-sdk</artifactId>
        <version>LATEST</version>
    </dependency>
    <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-lang3</artifactId>
        <version>LATEST</version>
    </dependency>
    <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-text</artifactId>
        <version>LATEST</version>
    </dependency>
    <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-io</artifactId>
        <version>LATEST</version>
    </dependency>
    <dependency>
        <groupId>com.amazon.alexa</groupId>
        <artifactId>alexa-skills-kit</artifactId>
        <version>LATEST</version>
    </dependency>
    <dependency>
        <groupId>com.amazon.alexa</groupId>
        <artifactId>ask-sdk</artifactId>
        <version>LATEST</version>
    </dependency>
    <dependency>
        <groupId>com.amazonaws</groupId>
        <artifactId>aws-java-sdk-lambda</artifactId>
        <version>LATEST</version>
    </dependency>
</dependencies>

Answer 5

运行此代码，它将输入作为音频（麦克风）并转换为文本而不是音频播放。

<head>
<title>MY Echo</title>
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css" />
<style type="text/css">
    body {
        font-family: verdana;
    }

    #result {
        height: 100px;
        border: 1px solid #ccc;
        padding: 10px;
        box-shadow: 0 0 10px 0 #bbb;
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 25px;
    }

    button {
        font-size: 20px;
        position: relative;
        left: 50%;
    }
</style>

<h4 align="center">Speech to text converter in JS</h4>
<div id="result"></div> <button onclick="startConverting();"><i class="fa fa-microphone"></i></button>
<script type="text/javascript">
    var r = document.getElementById('result');

    function startConverting() {
        if ('webkitSpeechRecognition' in window) {
            var speechRecognizer = new webkitSpeechRecognition();
            speechRecognizer.continuous = true;
            speechRecognizer.interimResults = true;
            speechRecognizer.lang = 'en-IN';
            speechRecognizer.start();
            var finalTranscripts = '';
            speechRecognizer.onresult = function(event) {
                var interimTranscripts = '';
                for (var i = event.resultIndex; i < event.results.length; i++) {
                    var transcript = event.results[i][0].transcript;
                    transcript.replace("\n", "<br>");
                    if (event.results[i].isFinal) {
                        finalTranscripts += transcript;
                        var speechresult = finalTranscripts;
                        console.log(speechresult);
                        if (speechresult) {
                            responsiveVoice.speak(speechresult, "UK English Female", {
                                pitch: 1
                            }, {
                                rate: 1
                            });
                        }
                    } else {
                        interimTranscripts += transcript;
                    }
                }
                r.innerHTML = finalTranscripts + '<span style="color:#999">' + interimTranscripts + '</span>';
            };
            speechRecognizer.onerror = function(event) {};
        } else {
            r.innerHTML = 'Your browser is not supported. If google chrome, please upgrade!';
        }
    }
</script>
</body>

</html>`

Answer 6

我不知道Google语音，但是可以使用javaScript语音SpeechSynthesisUtterance，将click事件添加到所引用的元素中。例如：

const listenBtn = document.getElementById('myvoice');

listenBtn.addEventListener('click', (e) => {
  e.preventDefault();

  const msg = new SpeechSynthesisUtterance(
    "Hello, hope my code is helpful"
  );
  window.speechSynthesis.speak(msg);

});

<button type="button" id='myvoice'>Listen to me</button>

Answer 7

下面的 JavaScript 代码将“文本”发送到 google cloud text-to-speech API 以进行口述/转换为 mp3 音频，并获取 mp3 音频内容作为响应。

sys.path[0]

在Javascript中使用Google文本转语音

7 个答案: