Google Text-toSpeech-在前端获取音频文件 [英] Google Text-toSpeech - Getting the Audio File in Front-end

查看:94
本文介绍了Google Text-toSpeech-在前端获取音频文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个要求,我需要使用Google Text to Speech将一些文本转换为音频.

I have a requirement where I need to convert some text to audio using Google Text to Speech.

我正在使用Nodejs将文本转换为音频文件,并希望将音频输出发送到前端.

I am using Nodejs to get convert the text to audio file, and want to send the audio output to the front-end.

NodeJS代码:

const client = new textToSpeech.TextToSpeechClient();
const request = {
  input: {text: 'Hello World'},
  // Select the language and SSML voice gender (optional)
  voice: {languageCode: 'en-US', ssmlGender: 'NEUTRAL'},
  // select the type of audio encoding
  audioConfig: {audioEncoding: 'MP3'},
};

const [response] = await client.synthesizeSpeech(request);

response.audioContent 包含作为缓冲对象的音频数据,如下所示:

response.audioContent contains the audio data which is a buffer object and looks like this:

<Buffer ff f3 44 c4 00 00 00 03 48 00 00 00 00 ff 88 89 40 04 06 3d d1 38 20 e1 3b f5 83 f0 7c 1f 0f c1 30 7f 83 ef 28 08 62 00 c6 20 0c 62 03 9f e2 77 d6 0f ... > 

我将此作为api响应发送到前端.但是,我在前端得到的是一个带有数组的普通对象,如下所示:

I send this as an api response to the front-end. However, what I get in the front-end is a plain object with an array which looks like below:

{ "type": "Buffer", "data": [ 255, 243, 68, 196, 0, 0, 0, 3, 72, 0, 0, 0, 0, 255, 136, 137, 64, 4, 6, 61, 209, 56, 32, 225, 59, 245, 131, 240.......]}

我的问题:

1)由于前端从api接收的数据不再是缓冲区,因此如何将这些数据转换回Buffer.

1) Since the data received by the front-end from the api is not a buffer anymore, how do I convert this data back to Buffer.

2)前端中有合适的缓冲区后,如何使用它播放音频.

2) Once I have a proper buffer in the frontend, how do I use it to play the audio.

在我的情况下,要转换的文本将始终为3-4个字词.因此,我不需要任何流功能.

In my case, the text to be converted will always be 3-4 word phrases. So, I don't need any streaming ability.

我的前端是VueJS.

My front-end is VueJS.

推荐答案

您可以下载音频并使用html音频播放器进行播放.

You can download the audio and play using an html audio player.

我们需要两个文件,即index.js(Node.js)代码和index.html(Vue.js/客户端).

We need two files, index.js (Node.js) code and index.html (Vue.js / Client).

这将合成您输入的文字并播放.

This will synthesize the text you input and play it.

运行节点脚本,然后转到 http://localhost:8000/观看演示.

Run the node script and go to http://localhost:8000/ to see the demo.

您可以忽略其中的"controls"属性以隐藏音频播放器,尽管它仍然可以播放声音!

You could omit the "controls" attribute in to hide the audio player, it should still play the sound though!

index.js

const express = require("express");
const port = 8000;
const app = express();
const stream = require("stream");
const textToSpeech = require('@google-cloud/text-to-speech');

app.use(express.static("./"));

app.get('/download-audio', async (req, res) => { 

    let textToSynthesize = req.query.textToSynthesize;
    console.log("textToSynthesize:", textToSynthesize);

    const client = new textToSpeech.TextToSpeechClient();
    const request = {
        input: {text: textToSynthesize || 'Hello World'},
        // Select the language and SSML voice gender (optional)
        voice: {languageCode: 'en-US', ssmlGender: 'NEUTRAL'},
        // select the type of audio encoding
        audioConfig: {audioEncoding: 'MP3'},
    };

    const [response] = await client.synthesizeSpeech(request);
    console.log(`Audio synthesized, content-length: ${response.audioContent.length} bytes`)
    const readStream = new stream.PassThrough();

    readStream.end(response.audioContent);
    res.set("Content-disposition", 'attachment; filename=' + 'audio.mp3');
    res.set("Content-Type", "audio/mpeg");

    readStream.pipe(res);
});

app.listen(port);
console.log(`Serving at http://localhost:${port}`);

index.html

<!DOCTYPE html>
<html>
<body>
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container m-3" id="app">
<h2>Speech synthesis demo</h2>
<h4>Press synthesize and play to hear</h4>
<audio :src="audio" ref="audio" controls autoplay>
</audio>
<div class="form-group">
    <label for="text">Text to synthesize:</label>
    <input type="text" class="form-control" v-model="synthesisText" placeholder="Enter text" id="text">
</div>
<div>
    <button @click="downloadAudio">Synthesize and play</button>
</div>
</div>

<script>

    new Vue({
        el: "#app",
        data: {
            audio: null,
            synthesisText: "Gatsby believed in the green light, the orgiastic future that year by year recedes before us."
        },
        methods: {
            downloadAudio() {
                this.audio = "/download-audio?textToSynthesize=" + encodeURIComponent(this.synthesisText);
                this.$refs.audio.load();
                this.$refs.audio.play();
            }
        }
    });

</script>
</body>
</html> 

这篇关于Google Text-toSpeech-在前端获取音频文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆