文字转语音JS原生api

最新推荐文章于 2025-04-24 10:37:46 发布

牛仔很会忙

最新推荐文章于 2025-04-24 10:37:46 发布

阅读量754

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_66970189/article/details/128674156

版权

该文章展示了一个简单的HTML页面，利用JavaScript的SpeechSynthesis接口将用户在textarea中输入的文本转换为语音播放。代码中定义了事件监听器，当点击按钮或按下回车键时，会读出文本内容，允许调整音量和速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

神奇的知识又增加了，刷抖音刷到了JS将文本内容转语音的api，这也太酷了吧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音</title>
</head>

<body>请输入您想听的话：<textarea type="text" id="ipt"></textarea><br>
    <button id="btn">播放</button>
    <script>
        const ipt = document.querySelector("#ipt");
        const oBtn = document.querySelector("#btn");
        const startAudio = () => {
            let text = ipt.value
            let msg = new SpeechSynthesisUtterance(text);
            msg.volume = 2; // 音量
            msg.rate = 0.8;  // 速度
            console.log(msg);
            window.speechSynthesis.speak(msg);
        }
        oBtn.addEventListener("click", () => {
            startAudio();
        })
        ipt.addEventListener("keydown", function (e) {
            if (e.code === 'Enter') {
                startAudio();
            }
        })
    </script>
</body>

</html>

复制可用