首页 > 其他分享 >js文字转语音

js文字转语音

时间:2023-03-09 10:24:05浏览次数:40  
标签:文字 function const option js 语音 synth msg document

<!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>
    <div class="voiceinator">
        <h1>文字转语音</h1>

        <select name="voice" id="voices">
            <option value="">Select A Voice</option>
        </select>

        <label for="rate">Rate:</label>
        <input name="rate" type="range" min="0" max="3" value="1" step="0.1">

        <label for="pitch">Pitch:</label>
        <input name="pitch" type="range" min="0" max="2" step="0.1">

        <textarea name="text">我是可以说话的哦</textarea>

        <button id="stop">Stop!</button>
        <button id="speak">Speak</button>
    </div>

    <script>
        const synth = window.speechSynthesis
        const msg = new SpeechSynthesisUtterance()
        let voices = []
        const voicesDropdown = document.querySelector('[name="voice"]')
        const options = document.querySelectorAll('[type="range"], [name="text"]')
        const speakButton = document.querySelector('#speak')
        const stopButton = document.querySelector('#stop')

        msg.text = '我是可以说话的哦!'
        msg.lang = 'zh-CN'

        synth.addEventListener('voiceschanged', getSupportVoices)
        speakButton.addEventListener('click', throttle(handleSpeak, 1000))
        stopButton.addEventListener('click', handleStop)
        options.forEach(e => e.addEventListener('change', handleChange))

        function getSupportVoices() {
            voices = synth.getVoices()
            voices.forEach(e => {
                const option = document.createElement('option')
                option.value = e.lang
                option.text = e.name
                voicesDropdown.appendChild(option)
            })
        }

        function handleSpeak(e) {
            msg.lang = voicesDropdown.selectedOptions[0].value
            synth.speak(msg)
        }

        function handleStop(e) {
            synth.cancel(msg)
        }

        function handleChange(e) {
            msg[this.name] = this.value
        }

        function throttle(fn, delay) {
            let last = 0
            return function () {
                const now = new Date()
                if (now - last > delay) {
                    fn.apply(this, arguments)
                    last = now
                }
            }
        }
    </script>
</body>

</html>

标签:文字,function,const,option,js,语音,synth,msg,document
From: https://www.cnblogs.com/alinda/p/17197378.html

相关文章

  • node.js版本管理器——NVM
    在日常工作中,需同时开发好几个前端项目的时候,可能不同项目使用的node的版本也不一样,而一台电脑只能安装和同时使用一个版本的node,这个时候我们需要借助NVM来管理node的版本......
  • 【转载】node服务开发和服务器部署(node.js+koa2+pm2+nginx)教程
    我为什么要写这篇文章昨天晚上有个小哥发维信给我,问我怎么部署一个node服务,有没有相关教程,我有点震惊,就问他有哪些不懂,他说几乎都不懂。我想他应该也是找过相关教程了......
  • 浏览器控制台引入css和js
    varimport_css=document.createElement('link');import_css.setAttribute("rel","stylesheet");import_css.setAttribute("href",'https://cdn.bootcdn.net/ajax/lib......
  • 基于JSP+javaBean的留言板--改进(附源码)
    一、系统的主要功能和特点系统主要实现了以JSP和JavaBean为基础的留言板。主要包括登录、登陆检查、增加留言、查看全部留言信息、查看指定留言信息等功能实现了数据的读......
  • Rocky Linux 9 安装 Node.js
    一、概要1.环境(1)RockyLinux9.1(2)Node.js16.0二、安装1.准备(1)更新仓库sudodnfupdate-y(2)安装NPM依赖的构建工具sudoyumgroupinstall'Deve......
  • 遍历JSONObject、JSONArray (适用任意复杂结构类型)
    https://blog.csdn.net/xiangshui021/article/details/120059652?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7......
  • JS系列--【千分位处理和还原】
    1.千分位转化文件utils/common.jsconsttoThousands=function(value,num=0){if(value==null){return}if(value>0){value......
  • fastjson
    1.2.25-1.2.41版本绕过首先我们用以前的脚本打一下:发现报错autoType不允许后面的类加载,查看代码publicClass<?>checkAutoType(StringtypeName,Class<?>expect......
  • 看看CabloyJS是如何异步加载并执行go wasm模块的
    介绍CabloyJS提供了一个内置模块a-wasmgo,将gowasm模块的异步加载运行机制进行了封装,使我们可以非常方便的在CabloyJS项目中引入gowasm,从而支持更多的业务场景开发下面,......
  • 66.mysql的json语法
    Mysql的json语法:#创建json表createtablet_json(idintprimarykey,snamevarchar(20),infojson);#插入json数据insertintot_json(id,sname,info)values(1,'......