5 篇文章带有标签 “frontend”

浏览器原生语音合成（TTS）开发经验

最近先后在站点上线了两个纯前端的朗读工具：Read Aloud 和 智能朗读阅读器。两者都基于浏览器的 Web Speech API 实现，没有后端、没有上传、没有第三方语音服务。开发过程中踩了一些坑，也积累了一些可复用的经验，记录如下。

一、Web Speech API 基础

浏览器 TTS 的入口非常简洁：

const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance(text);
synth.speak(utterance);

window.speechSynthesis 负责全局的语音队列，SpeechSynthesisUtterance 则是每一次发音的单元。在真正可用之前，建议先做兼容性判断：

if (!window.speechSynthesis) {
  alert('当前浏览器不支持 Web Speech API，无法使用朗读功能。');
  return;
}

目前 Safari、Chrome、Edge 等现代浏览器都支持该 API，但不同浏览器在语音质量、语音名、事件触发等方面差异明显，后面会详细说。

二、语音列表是异步加载的

第一次调用 speechSynthesis.getVoices() 时，返回的数组经常为空。这是因为浏览器需要异步加载系统语音包。

ttstext-to-speechweb-speech-apispeech-synthesisbrowserfrontendjavascript

发布

二维码生成器：支持网址、文本与 WiFi 的在线二维码工具

二维码生成器是什么

一款纯前端在线二维码生成工具，支持为网址、文本和 WiFi 网络创建可扫描的二维码，可自定义样式、尺寸与颜色，并直接下载 PNG 图片。

核心功能

  • 双模式生成：支持「网址 / 文本」和「WiFi 网络」两种二维码类型，一键切换
  • WiFi 二维码：输入 SSID、密码、选择加密方式（WPA/WEP/无），支持隐藏网络，手机扫码即可自动连接
  • 自定义样式：提供「方块」和「流体」两种视觉风格，流体样式采用自适应圆角与同心圆定位图案
  • 灵活尺寸：小 / 中 / 大 三档尺寸可选，适配不同使用场景
  • 颜色与边框：可自定义二维码颜色，并选择是否添加外圆角边框
  • 实时预览：调整样式、尺寸、颜色或边框后，二维码实时更新
  • 下载 PNG：一键下载高清 PNG 图片，可直接用于打印或分享
  • 复制图片：支持将二维码图片复制到剪贴板，方便粘贴到文档或聊天中
  • 中文支持：内置 UTF-8 编码处理，完美支持中文文本与中文 WiFi 名称
  • 纯前端运行：所有计算在浏览器本地完成，无需上传数据，保护隐私

使用方式

  1. 打开页面，选择「网址 / 文本」或「WiFi」模式
  2. 输入对应内容（网址、文本，或 WiFi 网络信息）
  3. 选择样式、尺寸、颜色，是否添加边框
  4. 点击「生成二维码」
  5. 使用「下载 PNG」或「复制图片」保存结果

浏览器兼容性

使用现代浏览器（Chrome、Edge、Firefox、Safari）可获得最佳体验。

tool qrcode 二维码 二维码生成器 frontend canvas-api wifi png browser

笔记

调试二维码识别与生成工具的几点经验

下午折腾了两个纯前端二维码工具：一个识别器、一个生成器。记录下调试过程中踩过的几个坑，免得以后重复踩。

1. 中文二维码识别出来是空的

用的是 jsQR。识别英文二维码没问题，但中文二维码识别结果直接为空。

查了下，jsQR 返回的对象里有两个字段：

  • code.data：legacy 字符串，对多字节字符支持不好
  • code.binaryData：原始字节数组

正确做法是用 binaryData 配合 TextDecoder 按 UTF-8 解码：

function decodeQRData(code) {
  if (code.binaryData && code.binaryData.length) {
    const bytes = new Uint8Array(code.binaryData);
    return new TextDecoder('utf-8').decode(bytes);
  }
  return code.data || '';
}

图片识别和摄像头扫码两处都要走这个解码逻辑。

2. 中文二维码生成后扫描乱码

生成器中 qr.addData(value) 对中文支持不行，需要先做一次 UTF-16 到 UTF-8 的字节转换：

qr-codejavascriptjsqrtextdecoderutf-8encodingfrontendbrowsernote

使用 Claude Code：HTML 超乎寻常的妙用

Thariq: Using Claude Code: The Unreasonable Effectiveness of HTML

Markdown 已成为智能体（agent）与我们沟通时占主导地位的文件格式。它简单、可移植，具备一定的富文本能力，且易于编辑。Claude 甚至已经相当擅长在 Markdown 文件中使用 ASCII 绘制图表。

但随着智能体变得越来越强大，我感到 Markdown 已成为一种受限的格式。我发现自己很难阅读超过一百行的 Markdown 文件。我想要更丰富的可视化效果、色彩和图表，并且希望能轻松分享它们。

我也越来越不亲自编辑这些文件，而是将它们用作规格说明、参考文件、头脑风暴输出等。当我确实需要编辑时，我通常会让 Claude 来编辑，这就削弱了 Markdown 最大的一个优势。

我开始更偏爱 HTML 作为输出格式，而不是 Markdown，并且越来越多地看到 Claude Code 团队中的其他人也在使用它。以下就是原因。

（如果你想先看一些示例，可以在这里看到一大堆：https://thariqs.github.io/html-effectiveness ，不过记得回来看更多关于"为什么"的内容。）

为什么选择 HTML？

信息密度

与 Markdown 相比，HTML 能够传达更丰富得多的信息。

htmlmarkdownclaude-code智能体frontendcsssvgjavascriptvisualizationartifacts