前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >"即输即播文字转语音工具"。不过,记住这是一个免费的工具哦!

"即输即播文字转语音工具"。不过,记住这是一个免费的工具哦!

原创
作者头像
快乐的小白
修改于 2024-02-24 05:50:19
修改于 2024-02-24 05:50:19
3400
举报
文章被收录于专栏:小白开发小白开发

在逛gitee的时候,看到一个js工具特别适合我之前做的一个项目里语音播放功能,所以准备替换之前用的百度tts。然后为了方便记录,在这里以一个小工具的形式展示出来。

在线体验Demo:

代码语言:php
AI代码解释
复制
https://cdn.whwsh.cn/demo2.html

1.如下图所示,点击中间的按钮,就会弹出输入框,然后输入你想播放的文字,点击确认即可直接播放。

2.然后html代码我就贴上了,js代码代码的话大家可以自行下载下,我就不贴上了。

代码语言:html
AI代码解释
复制
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        .center-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
<div class="center-container">
    <button onclick="showInputPrompt()">点我后,在弹窗输入文字,然后确认就可以播放了</button>
</div>
<script src="https://cdn.whwsh.cn/js/notification.js"></script>
<script>
    function showInputPrompt() {
        var inputText = prompt("请输入要播放的文字消息", "");
        if (inputText !== null) {
            if (inputText.trim() === "") {
                alert("输入不能为空,请重新输入");
            } else {
                notification.audio.setPlayText(inputText);
                notification.audio.play();
            }
        }
    }
</script>
</body>
</html>

3.然后在这里附上这个js的开发大佬地址,他的项目还有几个挺好的大家可以去看看。

代码语言:php
AI代码解释
复制
https://gitee.com/mail_osc

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 在线体验Demo:
    • 1.如下图所示,点击中间的按钮,就会弹出输入框,然后输入你想播放的文字,点击确认即可直接播放。
    • 2.然后html代码我就贴上了,js代码代码的话大家可以自行下载下,我就不贴上了。
    • 3.然后在这里附上这个js的开发大佬地址,他的项目还有几个挺好的大家可以去看看。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档