使用Javascript TSS和Highlights构建一个文本阅读器

i@glowisle.me (五葉地錦) — Fri, 04 Jul 2025 10:46:53 +0000

原文：https://jsdev.space/tts-sentence-reader/

翻译：Verdanti@glowisle.me

在这篇文章中，我们将构建一个简单的Web工具来探究Text-toSpeech(TTS)在JavaScript中是如何工作的。我们也将深入研究句子级高亮的工作逻辑。这两项功能经常结合在一起使用，以走到浏览器中打造无障碍的动态阅读体验。

步骤:

学习在浏览器中,TTS是如何工作的
探究动态高亮句子的实现方法
用HTML, CSS, JavaScript构建一个小工具(Demo & Code)

📢 浏览器中的TTS概述

JavaScript提供一个内置的API：SpeechSynthesis，它允许我们使用系统中的可用嗓音去大声朗读问文字。

核心对象:

speechSynthesis — 控制播放、暂停、恢复、停止
SpeechSynthesisUtterance — 作为TTS引擎的待播报文本

✨示例:

const msg = new SpeechSynthesisUtterance("Hello, world!");
window.speechSynthesis.speak(msg);

⚙️ 添加嗓音和配置

const utter = new SpeechSynthesisUtterance("This is a test");
const voices = window.speechSynthesis.getVoices();
utter.voice = voices.find(v => v.lang === 'en-US');
utter.rate = 1.2;
utter.pitch = 1;
window.speechSynthesis.speak(utter);

你也可以追踪朗读的开始和结束：

utter.onstart = () => console.log('Started speaking');
utter.onend = () => console.log('Finished speaking');

✍️ 句子高亮

展示给用户哪一个句子正在阅读，我们需要用CSS和JavaScript来高亮文本。

示例 HTML:

<p>
  <span class="sentence">First sentence.</span>
  <span class="sentence">Second sentence.</span>
</p>

处理高亮的CSS:

.sentence.active {
  background-color: yellow;
  font-weight: bold;
}

JavaScript高亮逻辑：

function highlight(index) {
  document.querySelectorAll('.sentence').forEach((el, i) => {
    el.classList.toggle('active', i === index);
  });
}

🚀项目: 使用TSS和高亮的阅读器

我们的程序将要：

逐句朗读文本
高亮朗读中的文本
提供播放、暂停、恢复、停止
让用户能选择嗓音

📄 HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Build an interactive sentence-level text-to-speech reader with highlight, playback controls, and local progress tracking using HTML and JavaScript." />
  <title>Interactive TTS Article Reader</title>
</head>
<body>
  <h1>Read Along TTS Demo</h1>
  <div class="toolbar">
    <button id="start">Play</button>
    <button id="pause" disabled>Pause</button>
    <button id="resume" disabled>Resume</button>
    <button id="stop" disabled>Stop</button>
    <button id="reset">Reset</button>
    <select id="voices"></select>
  </div>
  <div class="text-block" id="reader">
    <span class="line">Learning to code is a never-ending journey.</span>
    <span class="line">Technologies evolve rapidly, requiring constant adaptation.</span>
    <span class="line">JavaScript, HTML, and CSS are essential tools for web development.</span>
    <span class="line">Frameworks like React and Vue enhance front-end capabilities.</span>
    <span class="line">Back-end skills with Node.js extend JavaScript to the server.</span>
  </div>
  <div class="progress">
    <span id="progressText">0/0</span>
    <div class="bar"><div class="bar-fill" id="bar"></div></div>
  </div>
</body>
</html>

🎨 CSS 样式

body {
  font-family: sans-serif;
  margin: 0;
  padding: 2rem;
  background: #f0f4f8;
  color: #333;
}
h1 {
  text-align: center;
  margin-bottom: 2rem;
}
.toolbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.toolbar button,
.toolbar select {
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  border: none;
  font-size: 1rem;
}
.toolbar button {
  background: #0077cc;
  color: white;
  cursor: pointer;
}
.toolbar button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.text-block {
  background: white;
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.line {
  display: block;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}
.line:hover {
  background: #f9f9f9;
}
.line.active {
  background: #fff3cd;
  font-weight: bold;
}
.progress {
  text-align: center;
  margin-top: 1rem;
}
.bar {
  height: 8px;
  width: 100%;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, #0077cc, #005fa3);
  transition: width 0.3s;
}

💡 JavaScript逻辑

const lines = document.querySelectorAll('.line');
const playBtn = document.getElementById('start');
const pauseBtn = document.getElementById('pause');
const resumeBtn = document.getElementById('resume');
const stopBtn = document.getElementById('stop');
const resetBtn = document.getElementById('reset');
const voiceSelect = document.getElementById('voices');
const progressText = document.getElementById('progressText');
const progressBar = document.getElementById('bar');

const synth = window.speechSynthesis;
let voices = [];
let currentIndex = 0;
let currentUtterance = null;
let isPaused = false;

function populateVoices() {
  voices = synth.getVoices();
  voiceSelect.innerHTML = '';
  voices.forEach((voice, index) => {
    const opt = document.createElement('option');
    opt.value = index;
    opt.textContent = `${voice.name} (${voice.lang})`;
    voiceSelect.appendChild(opt);
  });
}

synth.onvoiceschanged = populateVoices;
populateVoices();

function updateUI() {
  progressText.textContent = `${currentIndex + 1}/${lines.length}`;
  progressBar.style.width = `${((currentIndex + 1) / lines.length) * 100}%`;
}

function highlightLine(index) {
  lines.forEach((line, i) => {
    line.classList.toggle('active', i === index);
  });
  lines[index]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

function speakLine(index) {
  if (index >= lines.length) return;
  const text = lines[index].textContent;
  const utter = new SpeechSynthesisUtterance(text);
  const selected = voiceSelect.value;
  if (voices[selected]) utter.voice = voices[selected];
  utter.rate = 1;

  utter.onstart = () => {
    highlightLine(index);
    playBtn.disabled = true;
    pauseBtn.disabled = false;
    resumeBtn.disabled = true;
    stopBtn.disabled = false;
  };

  utter.onend = () => {
    if (!isPaused) {
      currentIndex++;
      if (currentIndex < lines.length) {
        speakLine(currentIndex);
      } else {
        resetControls();
      }
    }
  };

  currentUtterance = utter;
  synth.speak(utter);
  updateUI();
}

function resetControls() {
  playBtn.disabled = false;
  pauseBtn.disabled = true;
  resumeBtn.disabled = true;
  stopBtn.disabled = true;
}

playBtn.onclick = () => {
  currentIndex = 0;
  speakLine(currentIndex);
};
pauseBtn.onclick = () => {
  synth.pause();
  isPaused = true;
  pauseBtn.disabled = true;
  resumeBtn.disabled = false;
};
resumeBtn.onclick = () => {
  synth.resume();
  isPaused = false;
  pauseBtn.disabled = false;
  resumeBtn.disabled = true;
};
stopBtn.onclick = () => {
  synth.cancel();
  resetControls();
};
resetBtn.onclick = () => {
  synth.cancel();
  currentIndex = 0;
  highlightLine(currentIndex);
  updateUI();
};

lines.forEach((line, index) => {
  line.addEventListener('click', () => {
    synth.cancel();
    currentIndex = index;
    speakLine(currentIndex);
  });
});

updateUI();

✅ 它们如何工作

每一个句子都是<span class="sentence">
我们迭代句子并使用SpeechSynthesisUtterance大声朗读
在朗读过程中，高亮正确的文本并滚动
一个句子结束后，自动朗读下一个句子

🔚 尾声

阅读了本文，你理解了：

浏览器TTS的运行原理
如何实现动态高亮文本
如何从零构建一个功能齐全的阅读界面

你可以扩展项目功能：

在localStorage保存阅读进度
添加进度条
加载外部文章或用户输入

osu!APIv1请求示例

i@glowisle.me (五葉地錦) — Fri, 11 Apr 2025 22:29:23 +0000

前言

本文章使用Nodejs环境做演示。请求用户数据。代码中的APIKEY要在osu官网‬申请。

const API_URL = "osu.ppy.sh";
const init = {
    k: "YOUR_API_KEY",
    type: "string",
    u: "kyzzz5658",
};

const https = require("https");

// 将参数序列化为查询字符串
const query = new URLSearchParams(init);
const options = {
    hostname: API_URL,
    method: "GET",
    path: `/api/get_user?${query}` // 附加参数
};

const req = https.request(options, (res) => {
    let data = '';
    res.on('data', (chunk) => data += chunk);
    res.on('end', () => {
        try {
            console.log(JSON.parse(data[0].username));
        } catch (e) {
            console.error('JSON 解析失败:', e);
        }
    });
});

// 错误处理
req.on('error', (err) => {
    console.error('请求失败:', err.code);
});

输出：

[
  {
    user_id: '33932276',
    username: 'Kyzzz5658',
    join_date: '2023-06-24 08:48:13',
    count300: '2139',
    count100: '609',
    count50: '194',
    playcount: '44',
    ranked_score: '1917044',
    total_score: '3095639',
    pp_rank: '1968010',
    level: '8.0115',
    pp_raw: '43.5449',
    accuracy: '81.70417785644531',
    count_rank_ss: '0',
    count_rank_ssh: '0',
    count_rank_s: '0',
    count_rank_sh: '0',
    count_rank_a: '1',
    country: 'CN',
    total_seconds_played: '2259',
    pp_country_rank: '38721',
    events: []
  }
]

首页 ·ppy/osu-api 维基

Nodejs环境下控制台拼接字符串输出有undefind

i@glowisle.me (五葉地錦) — Sat, 22 Mar 2025 18:56:33 +0000

今天在Nodejs环境下搓小工具，控制台输出拼接字符串时，发现有undefind，代码如下：

const date = new Date();
const year = date.getFullYear();
const month = date.getMonth();
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
const logTime = `[${year}-${month}-${day} ${hour}:${minute}:${second}] `;

class GenerateLog {
  static log() {
    process.stdout.write(logTime);
  }
}

console.log(GenerateLog.log() + "log output on the console");

输出确是这样：

[2025-3-22 18:56:33] undefindlog output on the console

原因：GenerateLog.log()方法没有返回值，所以输出undefind，解决方法如下：

// 让log方法返回logTime
class GenerateLog {
  static log() {
    return logTime; // 返回字符串
  }
}

console.log(GenerateLog.log() + "log output on the console");

关键总结： Javascript中，如果方法没有返回值，那么输出的就是undefind

扩展

为什么 console.log() 本身会返回 undefined？在 REPL 环境（如 Node.js 命令行或浏览器控制台）中，每条语句的执行结果会被隐式打印。由于 console.log() 函数本身没有返回值（即返回 undefined），因此会显示 undefined。但在脚本执行时，这一行为不会发生，因为脚本模式不自动打印返回值

JavaScript on 映屿