html5实现有道翻译文字播报语音，H5实现文字语音播报

慕云枫

已于 2024-10-22 17:49:53 修改

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： html5 前端 html

于 2023-07-20 15:06:29 首次发布

本文链接：https://blog.csdn.net/weixin_43992507/article/details/131830917

版权

前端专栏收录该内容

94 篇文章

订阅专栏

前言

搜了一堆百度、搜狗、有道的，没有一个能用的。
只能投机取巧了

实现

获取播放路径
在这里插入图片描述

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>语音播报</title>
	</head>
	<body>
		<button onclick='voiceBroadcast("微信收款10元")'>点击播放</button>
		<script>
		
			function voiceBroadcast(text) {
				new Audio("https://dict.youdao.com/dictvoice?audio="+text+"&le=zh").play();
				//new Audio("https://fanyi.baidu.com/gettts?lan=zh&text="+text+"&spd=5&source=web").play();
			}
			
			/**
	         * js默认播报
	         * @param {Object} text
	         */
			function voiceBroadcast2(text) {
				var utterThis = new SpeechSynthesisUtterance();
		        utterThis.volume = 1; // 声音的音量 范围是0到1
		        utterThis.lang = 'zh';// 汉语
		        utterThis.rate = 0.7; // 语速，数值，默认值是1，范围是0.1到10
		        utterThis.pitch = 2; // 音高，数值，范围从0（最小）到2（最大）。默认值为1
				utterThis.text = text;
				speechSynthesis.speak(utterThis);
			}
			
		</script>
	</body>
</html>