陈一文478 2023-09-26 10:06 采纳率: 100%
浏览 7
已结题

js怎样朗读div内的文字



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="js/jquery-1.8.3.js"></script>
    <title>中文测试</title>
</head>
<body>
<button id="a">开始</button>
<button id="b">暂停</button>
<button id="c">继续</button>
<button id="d">停止</button>
<div id="langdu">众所周知，古诗中有好多字音与我们现代的音有所不同，如果是细心研究过过学习过还好，但有时遇到模棱两可的字音，真的不知道读什么好，读起来也没有底气</div>
</body>
</html>
<script>
    var synth = window.speechSynthesis
    var u = new SpeechSynthesisUtterance();
    //汉语
    u.lang = 'zh-CN';
    u.rate = 1;
    function speak(textToSpeak) {
        u.text = textToSpeak;
        synth.speak(u)
    }
    var str = ""
    speak(str)
    $("#a").click(function() {
        speak(str)
    })
    $("#b").click(function() {
        synth.pause()
    })
    $("#c").click(function() {
        synth.resume()
    })
    $("#d").click(function() {
        synth.cancel();
    })
    // var synth = window.speechSynthesis;
    // var utterance1 = new SpeechSynthesisUtterance('How about we say this now? This is quite a long sentence to say.');
    // var utterance2 = new SpeechSynthesisUtterance('We should say another sentence too, just to be on the safe side.');
    // synth.speak(utterance1);
    // synth.speak(utterance2);
    // synth.pause(); // pauses utterances being spoken
    //https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/cancel
</script>
  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-09-26 12:24
    关注

    【相关推荐】



    • 你可以看下这个问题的回答https://ask.csdn.net/questions/378001
    • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：js-获取div内容
    • 除此之外, 这篇博客: js基础练习题中的 div跟随鼠标移动： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

      鼠标移动，div跟随鼠标移动

      实现：1.获取鼠标位置 2.赋值给div的left和top样式

      #div1{width:200px;height:200px;background:#bfa;position:absolute;}
<script>	
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		document.onmousemove = function(ev){
			var oEvent = ev || event;
			console.log('ev.clientX:' + oEvent.clientX + 'ev.clientY:' + oEvent.clientY);
			oDiv.style.left = oEvent.clientX + 'px';
			oDiv.style.top = oEvent.cilentY + 'px';
		};
	};
</script>
<div id="div1"></div>

    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 10月5日
  • 已采纳回答 9月27日
  • 创建了问题 9月26日

悬赏问题

  • ¥50 python批量提取发票的信息
  • ¥15 mysql安装，初始化数据库失败
  • ¥15 虚幻五引擎内容如何上传至网盘？
  • ¥15 使用mmpose库时出现了问题
  • ¥15 IRI2016模型matlab运行报错
  • ¥50 bat怎么设置电脑后台自动点击网页指定词运行脚本，输入指定网页链接，指定点击词，指定间隔时间，指定网页出现的词，指定网页出现词出现后后点击锁定，放在后台运行不影响前台鼠标工作
  • ¥20 20CrMnMo的高温变形抗力
  • ¥15 RTX3.6 5565驱动中断报错
  • ¥50 带防重放token（Antireplay-Token）的网站怎么用Python发送请求
  • ¥15 visa版本没问题，串口调试助手调试串口正常使用，但是labview刷新不出来