### 集成
Google Cloud Text-to-Speech API 到 Vue 项目
为了在 Vue.js 中集成并
使用 Google Cloud Text-to-Speech API 来
实现文本转语音功能，需遵循以下指南：
#### 安装必要的依赖项
首先，在前端环境中安装 `
google-cloud/
text-to-speech` 库并不合适，因为这涉及到敏感的服务账户密钥暴露风险。因此建议创建一个后端服务器来处理与
Google Cloud 的交互。
对于 Node.js 后端环境来说，可以通过 npm 或 yarn 添加
google cloud sdk:
```bash
npm install
--save @
google-cloud/
text-to-speech
```
或者
```bash
yarn add @
google-cloud/
text-to-speech
```
#### 创建后端接口用于调用
TTS API
定义一个简单的 Express 路由作为中介层，接收来自前端的请求并将结果返回给客户端[^1]:
```javascript
// server.js or app.js depending on your setup
const express = require('express');
const {
TextToSpeechClient} = require('@
google-cloud/
text-to-speech');
app.post('/
api/
tts', async (req, res) => {
const client = new
TextToSpeechClient();
// Construct the request object with input
text and voice settings.
const [response] = await client.synthesize
Speech({
input: {
text: req.body.
text},
voice: {languageCode: 'en
-US', ssmlGender: 'NEUTRAL'},
audioConfig: {audioEncoding: 'MP3'}
});
// Send back synthesized
speech as binary data.
res.set({'Content
-Type': 'audio/mpeg'});
res.send(response.audioContent);
});
```
此代码片段展示了如何设置 POST 请求处理器 `/
api/
tts` ，该处理器接受 JSON 格式的 body 参数 `{ "
text": string }` 并响应 MP3 编码的声音文件流。
#### 前端部分：发送 AJAX 请求获取音频数据
接下来是在 Vue 组件内部发起 HTTP 请求的方式之一——
使用 axios 发送异步 GET/POST 请求至上述自建
API路径，并播放接收到的数据。
```html
<template>
<div id="
tts-app">
<input v
-model="message" placeholder="Enter some
text here"/>
<but
ton @click="speak()">Speak</but
ton>
<!
-- Audio element
to play returned sound
-->
<audio ref="player"></audio>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: '
TtsApp',
data() {
return {
message: ''
}
},
methods: {
speak(){
let self = this;
axios.post("/
api/
tts", {"
text":this.message})
.then(function(response){
// Create a Blob out of response array buffer
var blob = new Blob([new Uint8Array(response.data)], {'type':'audio/mp3'});
// Set src attribute of HTMLAudioElement instance
self.$refs.player.src = URL.createObjectURL(blob);
// Play it!
self.$refs.player.play().catch(console.error);
})
.catch(console.error);
}
}
}
</script>
```
这段模板和脚本
实现了基本的文字输入框以及按钮点击事件触发器；当用户按下 Speak 按钮时会向后台提交待合成的内容字符串并通过 `<audio>` DOM 元素自动回放生成的结果。
最低0.47元/天 解锁文章
扫一扫
1470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
