如何将VSC中的文本转语音项目部署到Wix网站？

一、纯前端文本转语音实现（无需服务器） #

浏览器原生的Web Speech API可直接在前端完成文本转语音，完全不需要后端服务，所以你根本不需要找服务器URL。以下是最简可运行的完整代码：

合并版HTML+CSS+JS代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .tts-box {
            padding: 15px;
            max-width: 450px;
            margin: 0 auto;
        }
        #tts-text {
            width: 100%;
            height: 120px;
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            margin-bottom: 12px;
            resize: vertical;
        }
        #tts-button {
            padding: 10px 24px;
            background-color: #2563eb;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }
        #tts-button:hover {
            background-color: #1d4ed8;
        }
    </style>
</head>
<body>
    <div class="tts-box">
        <textarea id="tts-text" placeholder="输入要朗读的文本..."></textarea>
        <button id="tts-button">开始朗读</button>
    </div>

    <script>
        const btn = document.getElementById('tts-button');
        const inputText = document.getElementById('tts-text');

        btn.addEventListener('click', () => {
            const content = inputText.value.trim();
            if (!content) return;

            const speech = new SpeechSynthesisUtterance(content);
            // 可选自定义配置：语音、语速、音量
            // speech.rate = 1.1;
            // speech.volume = 0.9;
            // speech.voice = speechSynthesis.getVoices()[1];

            speechSynthesis.speak(speech);
        });
    </script>
</body>
</html>

二、部署到Wix的正确方式 #

方法1：使用HTML嵌入组件（推荐） #

1. 在Wix编辑器左侧点击「添加元素」→「嵌入代码」→「HTML iframe」
2. 点击嵌入组件的「设置代码」，切换到「代码」选项卡
3. 将上面的完整代码粘贴到输入框，点击「应用」
4. 调整组件的大小和位置，预览网站即可正常使用

方法2：使用自定义代码区集成到现有页面 #

1. 打开Wix编辑器，左侧点击「设置」→「自定义代码」
2. 点击「添加代码」，选择要添加的目标页面
3. 拆分代码分别添加：
   • CSS代码粘贴到「标签中」区域
   • HTML结构（<div class="tts-box">...</div>）粘贴到页面的容器组件内
   • JS代码粘贴到「标签末尾」区域
4. 确保HTML元素的ID与JS中的选择器一致，避免无法触发功能

三、之前问题的原因 #

• 单独粘贴代码片段无效：Wix的HTML嵌入组件需要完整的HTML结构，未包裹在<style>/<script>标签里的CSS/JS不会被解析
• 不需要服务器URL：Web Speech API是浏览器端运行的API，所有逻辑都在用户本地浏览器完成，完全不需要后端支持

内容的提问来源于stack exchange，提问作者Lauren Aldrich