离线状态下网页如何朗读字符串_speechsynthesisutterance 联网可以播放离线不可以-CSDN博客

本文链接：https://blog.csdn.net/HeikeLeo/article/details/138004946

声明

我所采用的浏览器的版本为Microsoft Edge 124.0.2478.51，教程里所对应的操作方法可能会有不符

经测试，此代码在Microsoft Edge 浏览器和Google 浏览器均可使用

经测试，此代码在Windows和Mac OS均可使用，其他未知

此文章用作互相交流学习，不喜勿喷。创作文章不易，喜欢的话请点个赞，谢谢！

<!DOCTYPE html> <!--声明文档类型-->
<html> <!--定义HtML文档-->
	<head> <!--包含文档的元数据，如字符集定义和标题-->
		<meta charset="utf-8"> <!--设置文档使用的字符编码为UTF-8-->
		<title>离线 - 朗读字符串</title> <!--设置网页标题-->
	</head>
	<body> <!--包含文档的主体内容-->
		<textarea rows="10" cols="100" placeholder="请输入要朗读的字符串" id="str"> <!--新建一个长文本输入框，用于输入需要朗读的字符串--></textarea>
		<br> <!--用于换行作用-->
		<button type="button" id="btn">开始朗读</button> <!--新建一个按钮，需要开始朗读时点它-->
	</body>
	<script type="text/javascript"> <!--定义script语言-->
		var btn=document.getElementById('btn')// 通过id名获取按钮
		var str=document.getElementById('str')// 通过id名获取长文本输入框
		btn.onclick=function(){// 当按钮被点击
			if(str.value.length>0){// 判断长文本输入框的值的长度，是否长度大于0
				const msg = new SpeechSynthesisUtterance(str.value)//  创建一个SpeechSynthesisUtterance对象，并设置朗读长文本输入框的值
				window.speechSynthesis.speak(msg)// 调用浏览器的文本到语音合成API的speak方法，开始朗读msg对象中的文本。
			}
			else{// 长文本输入框的值的长度不长度大于0
				alert('请输入要朗读的字符串')// 弹出提示框
			}
		}
	</script>
</html>