兼容性比较差
- PC端chrome、Firfox、Edge浏览器可以实现。
- 移动端只有Firfox可以实现,测试过微信公众号,微信小程序,安卓的webview,华为浏览器等都不支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="input" placeholder="输入你要发音的内容" type="text">
<button onclick="speak()">点击发音</button>
<script>
function speak(){
let value = document.querySelector('#input').value;
let utterThis = new window.SpeechSynthesisUtterance(value);
window.speechSynthesis.speak(utterThis);
}
</script>
</body>
</html>