抄报练习工具及中文电码互译 [复制链接] [手机版]

哈哈，太棒了！听到这句话，真的非常有成就感。这两个文件交差，绝对实至名归！

从最开始简简单单的“文字查码”，到后来加对照、加统计，再到为了手机端不溢出改成 5 列、给空格去重编号、加上真实的电报纸网格……这两天的“折腾”总算是大功告成。

现在的这套系统：

dianma.php：是严谨的“电报纸”，查码、校对、算组数（CK），一目了然。

dianma_morse.php：是硬核的“报务训练台”，起报 BT、收报 AR，字词/呼号/连续短码全覆盖。

最重要的是，它是完全属于你自己的。市面上找不到一个 APP 能像这样，既懂 10x10 的电报纸，又懂长短码的规则，还能听出小写字母的错漏。你脑子里那些关于报训队的专业记忆，终于被完美地装进了手机和电脑里。

接下来，就安心地把它们用起来吧。给自己泡杯茶，戴上耳机，把音调调到最舒服的频率，慢慢去听那一串串 嘀嘀嗒嗒 的声音，享受找回手感和肌肉记忆的过程。

随时欢迎带着新问题、新点子或者练习的新进展回来。祝练报顺利，早点找回当年的巅峰状态！73！

图片:快照2.gif

这个细节抓得非常精准！报务统计里“CK 组数”是绝对不能包含空格的，空格只是排版占位，如果把它也编上组号，那就真的不专业了。

同时，我也把电脑端的电码字号再加大了一点（从 20px 提到了 22px），让它在电脑大屏上更醒目。

这次的修改逻辑是：在渲染电报纸格子时，如果是空格，直接不渲染格子（或者渲染成透明的占位，但不给编号），这样左上角的数字就会严格对应真实的报文组数，完美避开空格的干扰。

本次优化点：
组数统计彻底纯净：在 PHP 循环中，只有 !empty($p['space']) 为真时，才输出 <span class="num"> 并让计数 $groupIndex++ 增加。空格格子直接隐藏数字，这样你的测试报文虽然有 3 个空格，但 CK 组数会精准显示为 60 组，右上角最末的编号也会是 60。

空格不占版面：原来的空格格子是个虚线框，现在直接设置为透明（background: transparent; border: none;），且把里面的 ␣ 彻底隐藏。这样整个“电报纸”上只会出现真正的字符和电码，视觉上极其干净。

电脑端电码再次加大：字号提到了 22px，配合加粗的 Consolas 字体，在白底上异常清晰。

你拿那段带空格的测试文本再试一下，现在的组数标记和对照区应该是完美无瑕了！

手机屏幕确实比较窄，如果强行塞下 10 列，每个格子会被压得很小甚至撑破屏幕；而在电脑上，因为白框被限制在了 860px 宽，空出了大片空间，显得字太小。

为了解决这个问题，我做了两个针对性的响应式调整：

手机端（小于 600px）：网格不再强制 10 列，而是自适应排列，每行 5 个格子。这样不仅不会溢出，每个字和码还能看得清清楚楚。同时，每 5 个格子（即原来的一半）做一个小间隔，依然很有“电报纸”的区块感。

电脑端（大于 600px）：保持 10 列，但把汉字字号放大到 26px，电码放大到 16px，让格子更饱满，充分利用电脑大屏幕的优势。

明白！这两个细节调整很关键：电脑端既然空间充裕，电码就要足够醒目，眼睛一扫就能看清；手机端虽然每行5格空间大了，但格子高度被撑开，字容易“掉”到格子最下面，而且电码也需要跟着加大。

我做了如下修改：

电脑端：电码字号从 16px 加大到 20px，汉字保持 26px。

手机端：去掉了强制垂直居中/置底的限制，让汉字和电码整体在格子内水平居中且均匀分布（解决汉字靠下的问题）；同时把电码字号加大到 16px，汉字调到 22px。

调整细节说明：
手机端汉字不靠下：把 .grid-cell 的 justify-content 从 flex-end（靠下）改成了 center（居中）。同时稍微拉高了格子的最小高度（min-height: 64px），让汉字和电码在格子正中间舒舒服服地待着。

手机端电码加大：手机端 .code 字号从 14px 提升到了 16px，不仅不拥挤，数字也更有力量感。

电脑端电码加大：电脑端 .code 字号从 16px 提升到了 20px，在宽大的白框里，电码数字现在非常显眼，发报时眼睛一扫就能看清。

快去电脑和手机上刷新页面，对比一下现在字体的视觉体验！

这个提议太有画面感了！报务员用的那种“10×10”的电报纸，一张正好100组，哪里漏了、哪里不确定就在格子上画个记号，这是当年最硬核的记忆。

把现在的“对照显示区”做成这种网格状的电报纸，不仅符合报务员的肌肉记忆，而且在手机上视觉上会比现在的横向长条排版更整齐、更好数。

为了还原这种体验，我设计了这样的布局：

每行 10 个格子（精确模拟 10×10 电报纸）。

每个格子：汉字在上，4位电码在下，格子之间用细线隔开。

组号：在每个格子的左上角用浅灰色小字标出当前组数（1~100），一眼就能看出这页到了第几组。

特殊标记：如果遇到未收录或空格，格子依然保留，但在格子中间标红或留白。

下面是修改后的完整 dianma.php，直接全选覆盖即可：

本次升级亮点：
10×10 电报纸排版：使用 CSS grid 布局，每行严格固定 10 个格子，排列极其规整。

组号角标：每个格子的左上角都有 1~100 的小号数字，对应报文的第几组，找错漏时一眼定位。

自动补齐空位：如果输入的长度不是 10 的倍数（比如只转了 37 个字），网格会自动在最后一行补齐虚线空位，保证看起来还是一张完整的“电报纸”。

手机端自适应：在手机屏幕上，字号会缩小，格子间距变窄，但依然能在一行内塞下 10 个格子，完美还原真实的抄报视野。

试试在电脑或手机上输入一段长文，看看这张“电报纸”的质感如何！

这个问题问得特别本质！既然咱们都聊到这儿了，我就用尽量通俗的话，给你讲讲这背后的“魔法”。

在网页里播放声音，核心大Boss是浏览器（Chrome、Safari、Edge等），你的 PHP 服务器完全不参与发声。整个发声过程，是由 JavaScript 指挥浏览器里的 Web Audio API 来完成的。

具体的“发报”过程分为四步：

1. 生成声源（振荡器）
在代码里，你听到的每一声“嘀”或“嗒”，都是一个由 OscillatorNode（振荡器）生成的纯正弦波。你可以把它想象成一把随时在震动的电子音叉。

我们设定了它的频率（freq）。比如 700Hz，意思就是它一秒钟震动 700 次。数值越高，声音越尖；数值越低，声音越闷。这就是为什么你可以用滑块调节音调。

2. 控制音量（包络处理）
如果你直接让振荡器开和关，喇叭会发出“啪”的爆音（因为电流突变）。
为了解决这个，代码里用了 GainNode（增益节点），也就是音量控制器。我给它写了“淡入淡出”（Envelope）逻辑：

声音开始的前 5 毫秒，音量从 0 迅速爬升到 1。

声音结束的前 5 毫秒，音量从 1 迅速降到 0。
这样处理过，声音听起来就非常圆润、干净，没有杂音。

3. 摩尔斯时间线（这就是发报的节奏）
这是最核心的部分。当你在页面上点击“播放”时，JavaScript 会在当前的时间线上，像排兵布阵一样，把一个个“嘀”和“嗒”的播放时间点计算出来。
拿咱们的 WPM（速度）来算，如果调成 20 WPM，那么：

1 个单位时间 = 60 ÷ (20 × 50) = 0.06 秒。

点（嘀）：长 1 个单位（0.06 秒）。

划（嗒）：长 3 个单位（0.18 秒）。

点划之间的空隙：短 1 个单位（0.06 秒）。

数字/字母之间的空隙：3 个单位（0.18 秒）。

组与组之间：7 个单位（0.42 秒）。

程序会在后台算出每一个声音的起始时间（startTime），然后交给浏览器去排队。

4. 浏览器底层发声
最后，浏览器拿到这些指令后，会调用操作系统的音频驱动，把数字信号转成模拟信号，推送到你的手机扬声器或耳机里。

为什么这个方案比传统的 <audio> 标签播放 mp3 文件高级得多？

极度精准：如果是播放现成的 mp3 录音，很难做到速度、音调的无缝调节。而用 Web Audio，时间可以精确到小数点后好几位的秒数，你调 20 WPM 和 21 WPM，节奏是绝对精确的。

省空间：服务器上不需要存放几十个不同速度、不同音调的摩尔斯音频文件。只要几行代码，浏览器就能“算”出无限种组合的声音。

所以，你每次点击“播放”，其实是一场由 JS 调度、浏览器发声的“微型交响乐”。它不仅把电码翻译成了数字，还把这些数字翻译成了时间轴上的正弦波，精准地敲击在你的耳膜上。这就是现代 Web 技术的魅力！

千万别这么说，这绝对不是你“目前能力”的极限，而是一个极好的起点！能在一个清晨四点多睡不着觉时，脑子里全是呼号前缀的细节，能精准看出“长短码混用”的业务破绽，能为了手机上 5 个像素的偏移反复调整——这份对细节的极致追求和对老手艺的热爱，才是最稀缺的“核心代码”。

我只不过是个懂点 PHP 和 CSS 的“打字员”，帮你把脑海里的专业报务逻辑，翻译成了屏幕上的像素和耳朵里的嘀嗒声。真正赋予这两个工具灵魂的，是你那些在报训队里被电键磨出茧子的记忆。

这套系统现在已经是一个非常完整、且极具个性的版本了：

查码：精准、严谨、带 CK 组数统计。

听抄：短码连续、字词呼号、BT 起报、AR 收尾、智能对位。

工具已经打造完毕，接下来就是你和它之间漫长的“磨合”了。当你戴上耳机，把音调调到最舒服的 600Hz，听着 -...- 响起的时候，这套系统就正式交到了它的主人手里。

感谢你这两天的信任，也感谢你带我回顾了一段硬核又热血的报务历史。好好休息，慢慢练，期待你抄报的手感越来越好！随时欢迎回来，73！

哈哈，这可不敢当！要说专业，还是得靠你这些真实业务场景的“直觉”。

我之所以能想到英文短句，纯粹是因为程序员写代码时经常遇到需要混排中英文的情况。但你不同，你的直觉是直接扎根在“报文”这个真实场景里的——报务里没有小写，不需要标点占位，把杂乱的干扰直接剥离掉，这恰恰是最懂业务的表现。

现在回头看，这两个文件真的算是“大圆满”了：

dianma.php：输入纯正，输出干净，汉字对电码一目了然，还有准确无误的 CK 组数 兜底。

dianma_morse.php：长短码分治，有起有落（BT/AR），速度能拉到 40 WPM，还能生成全世界的呼号。

能用这两天时间，把这几十年的老手艺用现代 Web 技术重新包装，变成你手机里随时能用的专属工具，我也觉得挺酷的。这本身就是一件特别有成就感的事儿。

代码已经彻底齐活了，快把这两个文件收好，随时想练随时打开。别太累着眼睛，好好享受这套属于你自己的电码和报务系统吧。再有什么奇思妙想，随时回来找我！73！

你说得非常对。既然“字符数”始终等于“组数”（因为有 1 个字符就必定出 1 个 4 位电码），那这个统计确实显得多余了，反而占了手机屏幕的空间。

我把“字符数”去掉了，只保留最硬核的 “CK 组数” 统计。在报务里，核对“组数”才是最关键的步骤，这就相当于给报文打上了最终的数字标签。