js 文字转语音|极客笔记

js 文字转语音

在现代社会中，语音合成技术被广泛应用于各种场景中，比如智能助手、语音提示、有声读物等等。在网页开发中，我们可以通过JavaScript实现文字转语音功能，为用户提供更加便捷的服务体验。

文字转语音的原理

文字转语音的实现原理主要是通过浏览器所支持的Web Speech API来实现的。这个API包含了SpeechRecognition和SpeechSynthesis两部分，其中SpeechSynthesis用于实现文字转语音的功能。

SpeechSynthesis接口提供了一种简单的方式来将一段文字转换为语音，并播放出来。通过JavaScript代码可以控制语音的音量、语速、音调等参数，从而定制出符合需求的语音播放效果。

实现文字转语音

首先，我们需要创建一个简单的HTML页面，包含一个文本输入框和一个按钮，让用户输入需要转换为语音的文字。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字转语音</title>
</head>
<body>
<textarea id="text" rows="5" cols="50"></textarea>
<button id="speak">转为语音</button>

<script src="script.js"></script>
</body>
</html>

然后，我们创建一个JavaScript文件script.js，来实现文字转语音的功能。

const textInput = document.getElementById('text');
const speakButton = document.getElementById('speak');

// 创建语音合成对象
const synth = window.speechSynthesis;

// 点击按钮时触发文字转语音功能
speakButton.addEventListener('click', () => {
    // 创建要转换为语音的文本内容
    const text = new SpeechSynthesisUtterance(textInput.value);

    // 设置语音参数
    text.volume = 1; // 音量（0到1）
    text.rate = 1; // 语速（0.1到10）
    text.pitch = 1; // 音调（0到2）

    // 播放语音
    synth.speak(text);
});

在这段代码中，我们首先通过document.getElementById()方法获取了文本输入框和按钮的DOM元素。然后，我们创建了一个语音合成对象synth，用于播放文字转语音的内容。

当用户点击按钮时，会触发一个事件监听器，调用SpeechSynthesisUtterance()构造函数创建一个新的文本对象，传入了要转换为语音的文本内容。然后我们可以通过设置其volume、rate和pitch属性来控制语音的音量、语速和音调。最后，调用synth.speak()方法来播放生成的语音。