起因
之前在看一些老电影的时候,看到电报员敲击发报机的场景,突然对摩尔斯电码产生了 兴趣。搜了一圈发现现有的在线工具要么界面老旧,要么功能单一,于是想着自己动手 做一个。
正好 Next.js 15 出了,Turbopack 也逐渐稳定,就当是练手了。
主要功能
- 双向翻译:文本 摩尔斯电码实时转换
- 音频播放:标准的滴答声,可以下载 WAV 文件
- 实用工具:二进制转摩尔斯、图片解码、hex 转换等几个小工具
- 参考图表:完整的摩尔斯电码对照表
- 教学内容:写了几篇文章,比如快速学习方法、STEM 课堂项目创意、历史演变等
技术栈
- Next.js 15 (App Router + Turbopack)
- React 19 (Server Components)
- Tailwind CSS 4 (预览版)
- TypeScript 严格模式
- 纯前端实现,所有转换都在浏览器完成,不上传数据
踩过的坑
-
Turbopack 还是有点小问题 开发时热更新偶尔会卡住,需要手动重启。不过编译速度确实快了不少。
-
Tailwind CSS 4 的 API 变化 新版的 @import "tailwindcss" 写法还不太习惯,文档也比较少,踩了点坑。
-
音频生成 一开始用 Web Audio API 生成摩尔斯电码音频,在不同浏览器表现不一致,最后调整了参数才统一。
-
图片 OCR 本来想用 Tesseract.js 做图片中的摩尔斯识别,但模型太大影响加载速度,最后改成了简单的模式识别。
为什么要做这个?
- 学习价值:摩尔斯电码其实是很好的编码学习案例,变长编码、信息论的早期实践
- 实用性:业余无线电爱好者、历史爱好者、STEM 教育都能用上
- 技术探索:想试试 Next.js 15 的新特性,顺便练练手
目前的问题
- SEO 刚起步,还没什么流量
- 博客内容还比较少,计划慢慢补充
- 移动端的音频下载体验还不够好
- 没有做离线 PWA (懒)
欢迎反馈
如果你对摩尔斯电码或者通信历史感兴趣,可以试试看。
地址:Morse Code Translator
真心想听听大家的建议:
- 功能上还缺什么?
- 有没有觉得多余的部分?
- 界面设计有没有反人类的地方?
- 技术实现上有没有更好的方案?