用 Next.js 15 做了个摩尔斯电码翻译器，顺便探索了一下 Turbopack

[sobut1213]

起因

之前在看一些老电影的时候，看到电报员敲击发报机的场景，突然对摩尔斯电码产生了 兴趣。搜了一圈发现现有的在线工具要么界面老旧，要么功能单一，于是想着自己动手 做一个。

正好 Next.js 15 出了，Turbopack 也逐渐稳定，就当是练手了。

---

主要功能

• 双向翻译：文本 ↔ 摩尔斯电码实时转换
• 音频播放：标准的滴答声，可以下载 WAV 文件
• 实用工具：二进制转摩尔斯、图片解码、hex 转换等几个小工具
• 参考图表：完整的摩尔斯电码对照表
• 教学内容：写了几篇文章，比如快速学习方法、STEM 课堂项目创意、历史演变等

---

技术栈

• Next.js 15 (App Router + Turbopack)
• React 19 (Server Components)
• Tailwind CSS 4 (预览版)
• TypeScript 严格模式
• 纯前端实现，所有转换都在浏览器完成，不上传数据

---

踩过的坑

1. Turbopack 还是有点小问题 开发时热更新偶尔会卡住，需要手动重启。不过编译速度确实快了不少。

2. Tailwind CSS 4 的 API 变化 新版的 @import "tailwindcss" 写法还不太习惯，文档也比较少，踩了点坑。

3. 音频生成 一开始用 Web Audio API 生成摩尔斯电码音频，在不同浏览器表现不一致，最后调整了参数才统一。

4. 图片 OCR 本来想用 Tesseract.js 做图片中的摩尔斯识别，但模型太大影响加载速度，最后改成了简单的模式识别。

---

为什么要做这个？

1. 学习价值：摩尔斯电码其实是很好的编码学习案例，变长编码、信息论的早期实践
2. 实用性：业余无线电爱好者、历史爱好者、STEM 教育都能用上
3. 技术探索：想试试 Next.js 15 的新特性，顺便练练手

---

目前的问题

1. SEO 刚起步，还没什么流量
2. 博客内容还比较少，计划慢慢补充
3. 移动端的音频下载体验还不够好
4. 没有做离线 PWA （懒）

---

欢迎反馈

如果你对摩尔斯电码或者通信历史感兴趣，可以试试看。

地址：Morse Code Translator

真心想听听大家的建议：

• 功能上还缺什么？
• 有没有觉得多余的部分？
• 界面设计有没有反人类的地方？
• 技术实现上有没有更好的方案？

---

[chung]

可以考虑加个摩尔斯电码播放