HTML5 JavaScript实现语音合成（文字转语音）

HTML5+JavaScript实现语音合成（文字转语音）

本文介绍用HTML5和JavaScript实现语音合成朗读（文字转语音）。

Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。权威文档可见：

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API

在此我们关注语音合成。

语音合成通过 SpeechSynthesis 接口进行访问，它提供了文字到语音（TTS）的能力，这使得程序能够读出它们的文字内容（通常使用设备默认的语音合成器）。

https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis

使用HTML5实现语音朗读功能相对简单，主要用到的是Web Speech API。这是一个非常强大的API，允许网页合成语音（Text-to-Speech, TTS）。

下面给出比较完善的例子，先看效果图：

源码如下：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语音朗读</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #text-area {
            width: 100%;
            height: 300px;
        }
        #controls {
            margin-top: 10px;
        }
        #controls button {
            padding: 5px 10px;
            margin-right: 10px;
        }
        #options {
            margin-top: 20px;
        }
        #options label {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
 
<textarea id="text-area" placeholder="在这里输入文本..."></textarea>
<div id="controls">
    <button id="speak-button">朗读</button>
    <button id="pause-button" disabled>暂停</button>
    <button id="resume-button" disabled>继续</button>
    <button id="stop-button" disabled>停止</button>
</div>
<div id="options">
    <label for="voice-select">选择声音:</label>
    <select id="voice-select"></select>
    <br>
    <label for="lang">语言:</label>
    <select id="lang">
        <option value="zh-CN">中文</option>
        <option value="en-US">英文</option>
    </select>
    <br>
    <label for="rate">语速:</label>
    <input type="range" id="rate" min="0.1" max="3" value="1" step="0.1">
    <br>
    <label for="volume">音量:</label>
    <input type="range" id="volume" min="0" max="1" value="1" step="0.1">
    <br>
    <label for="pitch">音调:</label>
    <input type="range" id="pitch" min="0" max="2" value="1" step="0.1">
</div>
 
<script>
    const textArea = document.getElementById('text-area');
    const speakButton = document.getElementById('speak-button');
    const pauseButton = document.getElementById('pause-button');
    const resumeButton = document.getElementById('resume-button');
    const stopButton = document.getElementById('stop-button');
    const voiceSelect = document.getElementById('voice-select');
    const langSelect = document.getElementById('lang');
    const rateRange = document.getElementById('rate');
    const volumeRange = document.getElementById('volume');
    const pitchRange = document.getElementById('pitch');
    let voices = [];
 
    function populateVoices() {
        voices = speechSynthesis.getVoices();
        voiceSelect.innerHTML = '';
        voices.forEach(voice => {
            const option = document.createElement('option');
            option.textContent = voice.name + " (" + voice.lang + ")";
            option.value = voice.name;
            voiceSelect.appendChild(option);
        });
    }
 
    if (speechSynthesis.onvoiceschanged !== undefined) {
        speechSynthesis.onvoiceschanged = populateVoices;
    }
 
    const utterance = new SpeechSynthesisUtterance();
    let isSpeaking = false;
    let isPaused = false;
 
    speakButton.addEventListener('click', function() {
        if (isSpeaking) {
            window.speechSynthesis.pause();
            pauseButton.disabled = true;
            updateButtons();
            return;
        }
        window.speechSynthesis.cancel();
        utterance.text = textArea.value;
        utterance.voice = voices.find(voice => voice.name === voiceSelect.value);
        utterance.lang = langSelect.value;
        utterance.rate = rateRange.value;
        utterance.volume = volumeRange.value;
        utterance.pitch = pitchRange.value;
        window.speechSynthesis.speak(utterance);
        isSpeaking = true;
        updateButtons();
    });
 
    pauseButton.addEventListener('click', function() {
        if (!isSpeaking || isPaused) return;
        window.speechSynthesis.pause();
        isPaused = true;
        updateButtons();
    });
 
    resumeButton.addEventListener('click', function() {
        if (!isSpeaking || !isPaused) return;
        window.speechSynthesis.resume();
        isPaused = false;
        updateButtons();
    });
    stopButton.addEventListener('click', function() {
        if (!isSpeaking) return;
        window.speechSynthesis.cancel();
        isSpeaking = false;
        isPaused = false;
        updateButtons();
    });
 
    function updateButtons() {
        speakButton.disabled = isSpeaking && !isPaused;
        pauseButton.disabled = !isSpeaking || isPaused;
        resumeButton.disabled = !isSpeaking || !isPaused;
        stopButton.disabled = !isSpeaking;
    }
 
    // 当朗读结束时更新状态
    utterance.onend = function() {
        isSpeaking = false;
        updateButtons();
    };
 
    // 当朗读出错时更新状态
    utterance.onerror = function() {
        isSpeaking = false;
        updateButtons();
    };
 
    // 页面加载完成后立即尝试填充语音列表
    populateVoices();
    // 如果在页面加载时语音列表不可用，那么当它变得可用时填充语音列表
    if (speechSynthesis.onvoiceschanged !== undefined) {
        speechSynthesis.onvoiceschanged = populateVoices;
    }
 
    // 初始化时更新按钮状态
    updateButtons();
 
</script>  
  
</body>  
</html>复制

HTML5 JavaScript实现语音合成（文字转语音）

HTML5+JavaScript实现语音合成（文字转语音）

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

npm使用淘宝镜像下载依赖包

搭建Nexus前端npm私服，上传发布npm包和下载依赖

npm install包提示安装成功，但项目目录中没有出现node_modules的解决方案

解决VUE3 Vite打包后动态图片资源不显示问题

vue基于sockjs-client stompjs实现websocket客户端

Vue 3 项目中导入外部的＜link＞和＜script＞资源

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>语音朗读</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 20px;
	}
	#text-area {
	width: 100%;
	height: 300px;
	}
	#controls {
	margin-top: 10px;
	}
	#controls button {
	padding: 5px 10px;
	margin-right: 10px;
	}
	#options {
	margin-top: 20px;
	}
	#options label {
	display: inline-block;
	width: 100px;
	}
	</style>
	</head>
	<body>

	<textarea id="text-area" placeholder="在这里输入文本..."></textarea>
	<div id="controls">
	<button id="speak-button">朗读</button>
	<button id="pause-button" disabled>暂停</button>
	<button id="resume-button" disabled>继续</button>
	<button id="stop-button" disabled>停止</button>
	</div>
	<div id="options">
	<label for="voice-select">选择声音:</label>
	<select id="voice-select"></select>
	<br>
	<label for="lang">语言:</label>
	<select id="lang">
	<option value="zh-CN">中文</option>
	<option value="en-US">英文</option>
	</select>
	<br>
	<label for="rate">语速:</label>
	<input type="range" id="rate" min="0.1" max="3" value="1" step="0.1">
	<br>
	<label for="volume">音量:</label>
	<input type="range" id="volume" min="0" max="1" value="1" step="0.1">
	<br>
	<label for="pitch">音调:</label>
	<input type="range" id="pitch" min="0" max="2" value="1" step="0.1">
	</div>

	<script>
	const textArea = document.getElementById('text-area');
	const speakButton = document.getElementById('speak-button');
	const pauseButton = document.getElementById('pause-button');
	const resumeButton = document.getElementById('resume-button');
	const stopButton = document.getElementById('stop-button');
	const voiceSelect = document.getElementById('voice-select');
	const langSelect = document.getElementById('lang');
	const rateRange = document.getElementById('rate');
	const volumeRange = document.getElementById('volume');
	const pitchRange = document.getElementById('pitch');
	let voices = [];

	function populateVoices() {
	voices = speechSynthesis.getVoices();
	voiceSelect.innerHTML = '';
	voices.forEach(voice => {
	const option = document.createElement('option');
	option.textContent = voice.name + " (" + voice.lang + ")";
	option.value = voice.name;
	voiceSelect.appendChild(option);
	});
	}

	if (speechSynthesis.onvoiceschanged !== undefined) {
	speechSynthesis.onvoiceschanged = populateVoices;
	}

	const utterance = new SpeechSynthesisUtterance();
	let isSpeaking = false;
	let isPaused = false;

	speakButton.addEventListener('click', function() {
	if (isSpeaking) {
	window.speechSynthesis.pause();
	pauseButton.disabled = true;
	updateButtons();
	return;
	}
	window.speechSynthesis.cancel();
	utterance.text = textArea.value;
	utterance.voice = voices.find(voice => voice.name === voiceSelect.value);
	utterance.lang = langSelect.value;
	utterance.rate = rateRange.value;
	utterance.volume = volumeRange.value;
	utterance.pitch = pitchRange.value;
	window.speechSynthesis.speak(utterance);
	isSpeaking = true;
	updateButtons();
	});

	pauseButton.addEventListener('click', function() {
	if (!isSpeaking \|\| isPaused) return;
	window.speechSynthesis.pause();
	isPaused = true;
	updateButtons();
	});

	resumeButton.addEventListener('click', function() {
	if (!isSpeaking \|\| !isPaused) return;
	window.speechSynthesis.resume();
	isPaused = false;
	updateButtons();
	});
	stopButton.addEventListener('click', function() {
	if (!isSpeaking) return;
	window.speechSynthesis.cancel();
	isSpeaking = false;
	isPaused = false;
	updateButtons();
	});

	function updateButtons() {
	speakButton.disabled = isSpeaking && !isPaused;
	pauseButton.disabled = !isSpeaking \|\| isPaused;
	resumeButton.disabled = !isSpeaking \|\| !isPaused;
	stopButton.disabled = !isSpeaking;
	}

	// 当朗读结束时更新状态
	utterance.onend = function() {
	isSpeaking = false;
	updateButtons();
	};

	// 当朗读出错时更新状态
	utterance.onerror = function() {
	isSpeaking = false;
	updateButtons();
	};

	// 页面加载完成后立即尝试填充语音列表
	populateVoices();
	// 如果在页面加载时语音列表不可用，那么当它变得可用时填充语音列表
	if (speechSynthesis.onvoiceschanged !== undefined) {
	speechSynthesis.onvoiceschanged = populateVoices;
	}

	// 初始化时更新按钮状态
	updateButtons();

	</script>

	</body>
	</html>

HTML5 JavaScript实现语音合成（文字转语音）

HTML5+JavaScript实现语音合成（文字转语音）

微信扫一扫：分享