惊了！浏览器居然自带语音 API 和流处理 API！
引言
在数字时代，网页的可访问性对所有用户来说都至关重要，尤其是对于有视觉障碍的用户或无法随时使用视觉的场景，传统的网页展示方式显得不够便利。浏览器提供的 语音合成 API（Speech Synthesis API） 和 流处理 API（ReadableStream API），可以使网页内容通过语音“读出来”，或通过流的方式逐步加载和处理数据。
本文将介绍这些 API 的工作原理、应用场景，以及它们如何提升网页的可访问性和用户体验。
简介
1. Speech Synthesis API
- 定义：Speech Synthesis API 允许浏览器将文本内容转换为语音输出。
- 工作原理：开发者通过调用
speechSynthesis.speak()方法，将文本发送到浏览器的语音合成引擎，生成语音。 - 应用场景：为有视觉障碍的用户朗读网页内容；在驾驶等无法用眼时为用户提供信息（如导航）。
2. ReadableStream API
- 定义：ReadableStream API 提供了一种处理数据流的方式，按需逐步读取数据而非一次性加载全部内容。
- 工作原理：通过创建
ReadableStream对象，数据可以按块（chunk）读取，实时处理。 - 应用场景：处理大型文件、流媒体、实时数据，如在线阅读器或股市行情展示。
Speech Synthesis API 的使用
1. 基本用法
if ('speechSynthesis' in window) {
const speechText = "这是一个语音合成示例。";
const utterance = new SpeechSynthesisUtterance(speechText);
// 可选：设置语音参数
utterance.voice = speechSynthesis.getVoices()[0]; // 获取第一个可用语音
utterance.pitch = 1; // 音调
utterance.rate = 1; // 语速
window.speechSynthesis.speak(utterance); // 朗读文本
} else {
alert('当前浏览器不支持语音合成 API。');
}
2. 高级用法
监听事件：通过事件监听合成状态变化，如开始、暂停、结束。
utterance.onstart = () => console.log("语音合成开始"); utterance.onend = () => console.log("语音合成结束");支持多语言：通过设置
utterance.lang属性可以支持不同的语言，如中文、英文等。utterance.lang = 'zh-CN'; // 朗读中文
ReadableStream API 的使用
1. 基本用法
const stream = new ReadableStream({
start(controller) {
// 将 "Hello World" 作为流数据
controller.enqueue(new TextEncoder().encode("Hello"));
controller.enqueue(new TextEncoder().encode("World"));
controller.close(); // 结束流
}
});
// 读取流数据
const reader = stream.getReader();
reader.read().then(({ value, done }) => {
console.log(new TextDecoder().decode(value)); // 输出：Hello
});
2. 高级用法
- 处理大型文件：分块处理大型文件，通过
ReadableStream按需读取而不是一次性加载，减轻内存压力。 - 实时数据处理：处理实时数据流，如音频、视频或 WebSocket 的数据传输，可以边接收边处理。
应用案例
1. 辅助阅读工具
描述：为有视觉障碍的用户开发一个网页辅助阅读工具，使用 Speech Synthesis API 将网页内容转换为语音。
<button id="read-btn">朗读页面内容</button>
<p id="text-to-read">欢迎来到语音合成示例页面，这里展示了如何将文字转换为语音。</p>
<script>
document.getElementById('read-btn').addEventListener('click', function() {
const textToRead = document.getElementById('text-to-read').innerText;
if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(textToRead);
window.speechSynthesis.speak(utterance);
}
});
</script>
2. 实时数据展示
描述：在新闻网站或股市行情中，使用 ReadableStream API 处理实时数据流。
const newsStream = new ReadableStream({
start(controller) {
// 模拟实时接收数据
setTimeout(() => controller.enqueue(new TextEncoder().encode("最新新闻：")), 1000);
setTimeout(() => controller.enqueue(new TextEncoder().encode("市场发生了大变化")), 2000);
setTimeout(() => controller.close(), 3000); // 结束数据流
}
});
// 处理流数据
const reader = newsStream.getReader();
function readNews() {
reader.read().then(({ value, done }) => {
if (!done) {
console.log(new TextDecoder().decode(value)); // 输出每条新闻
readNews(); // 递归读取
}
});
}
readNews();
总结
浏览器内置的 Speech Synthesis API 和 ReadableStream API 提供了一种全新的交互方式，使网页内容可以通过语音或流式传输被“阅读”或处理。这不仅提升了网页的可访问性，还为开发者提供了新的应用场景和创新机会。
通过这些 API，开发者可以构建更智能、友好的网页应用，从而改善用户体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speech Synthesis and Readable Stream Demo</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
}
.container {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
p {
font-size: 18px;
}
#news-output {
margin-top: 10px;
padding: 10px;
background-color: #f4f4f4;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Speech Synthesis API Demo</h2>
<p id="text-to-read">欢迎来到语音合成示例页面，这里展示了如何将文字转换为语音。</p>
<button id="read-btn">点击朗读</button>
</div>
<div class="container">
<h2>ReadableStream API Demo</h2>
<button id="start-stream">开始实时数据流</button>
<div id="news-output"></div>
</div>
<script>
// Speech Synthesis API Demo
document.getElementById('read-btn').addEventListener('click', function() {
const textToRead = document.getElementById('text-to-read').innerText;
if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(textToRead);
utterance.pitch = 1; // 音调
utterance.rate = 1; // 语速
window.speechSynthesis.speak(utterance);
} else {
alert('当前浏览器不支持语音合成 API。');
}
});
// ReadableStream API Demo
document.getElementById('start-stream').addEventListener('click', function() {
const newsStream = new ReadableStream({
start(controller) {
// 模拟实时数据流接收
setTimeout(() => controller.enqueue(new TextEncoder().encode("最新新闻：")), 1000);
setTimeout(() => controller.enqueue(new TextEncoder().encode("市场发生了大变化")), 2000);
setTimeout(() => controller.enqueue(new TextEncoder().encode("股市大跌 10%")), 3000);
setTimeout(() => controller.close(), 4000); // 结束数据流
}
});
const reader = newsStream.getReader();
const newsOutput = document.getElementById('news-output');
newsOutput.innerHTML = ''; // 清空之前内容
function readNews() {
reader.read().then(({ value, done }) => {
if (!done) {
const text = new TextDecoder().decode(value);
newsOutput.innerHTML += `<p>${text}</p>`; // 输出实时新闻内容
readNews(); // 递归继续读取数据
} else {
newsOutput.innerHTML += '<p><strong>数据流已结束。</strong></p>';
}
});
}
readNews(); // 开始读取数据
});
</script>
</body>
</html>