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

明白，手机屏幕窄，说明文字太长确实会折成三行，显得挤。把说明里括号内的提示去掉，直接让下拉框的名字清晰明了，是最干净的做法。

同时，速度选择我增加了两档（极慢 5 WPM 和 极速 30 WPM），让你有更宽裕的练习区间。

明白了，5 WPM 确实像老牛拉破车一样慢，30 和 35 更符合你当年练兵的实战节奏。

我把速度档位调整为：慢速 10 WPM、中速 15 WPM、标准 20 WPM、快速 25 WPM、极速 30 WPM、超速 35 WPM。

并且把下拉框的选项改成了你要的：中文单字、中文词组、呼号听抄，去掉了说明里的括号。

由于刚才发给你的完整代码又被截断了（JS 没写完），这次我把完整、无截断的代码给你，直接全选覆盖 dianma_morse.php 即可：

确实，你最初写的那句“听摩尔斯，写出数字、汉字或词组，点“显示答案”对照”更有报务员的专业感，也点明了具体的抄收内容。之前为了塞下“呼号”，我把它改得太简略了。

另外，短码连续抄收的速度上限加到 40 WPM 没问题，当年的老手在短码上确实能飙到这个极限。

我把这两处都改了，直接全选覆盖 dianma_morse.php 即可：

我觉得非常完美，完全可以说是“定稿版”了！

回想一下咱们这两天的“折腾”，从最初的一个查码小工具，到现在这套系统，它已经不仅仅是一个网页，而是一个极具专业水准的“个人报务训练台”：

主文件 dianma.php：双向互译、汉字与电码上下对照、报文 CK 组数自动统计、全半角标点归一化，发报查码用它就足够稳当。

听抄文件 dianma_morse.php：

模块清晰：“字词呼号练习” + “短码连续抄收”，分类科学。

音质干净：用 Web Audio 加了包络淡入淡出，没有爆音，音调还能调，戴耳机听非常舒服。

细节专业：起报 BT、结束 AR、短码规则、长码字母、随机呼号生成器（带 /P、/QRP 后缀）。

判题智能：序列对齐算法防错位，不再因为漏抄一组就全军覆没，输入带不带空格都能自动识别。

UI 舒适：手机端、电脑端排版都很清爽，速度上限拉到了 40 WPM，小房子悬浮按钮也很精致。

这绝对是市面上独一份、为你量身打造的“中文电码听抄神器”。市面上那些 Morse App 确实找不到这么懂中文报务习惯的。

代码上目前确实不需要再动什么了。硬件软件都齐活，接下来，就交给你自己的耳朵和手了。

练报这事儿，肌肉记忆一旦唤醒，速度上去是很快的。以后如果有空，或者遇到了什么新想法，随时欢迎回来找我“折腾”！祝早日重回当年 30 码以上的巅峰状态，73！

报文统计：
CK 组数：37 组
字符数：48 个
（每 1 个字符 = 1 组电码）这后面的小括号说明显示不那么准确了，其实我觉得可以删除不要。

修
0208
复
（中间部分略）
9975

看懂了！你这段测试文本里包含了空格（显示为 ␣）和小写字母。因为你的码表里只收录了数字、标点、大写字母，所以遇到小写字母和空格时，程序虽然没崩溃，但排版被占位符挤乱了，而且底下的统计数字（48个字符）把空格也算进去了，导致“CK 组数 37”和“字符数 48”对不上。

你提的建议非常对：输入文本时，先做预处理。

小写转大写：报务里通常不区分大小写，遇到小写字母直接自动转成大写（i → I）。

过滤多余空格：中文电报码是不需要空格的，空格会破坏对齐和统计。可以在查码前把所有空格直接剔除，或者保留空格但不计入组数。

我采取了“保留空格作为分隔，但不计入电码组数”的方案。这样，如果你输入英文句子 I love PHP，字母照常转换，单词间的空格在对照区显示为一个浅浅的 ␣ 作为排版占位，但统计面板里只计算真正对应电码的字符数。

同时，我删掉了那句多余的 （每 1 个字符 = 1 组电码）。

下面是完整的 dianma.php 代码，直接全选覆盖即可：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在网页里播放声音，核心大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 技术的魅力！

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

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

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

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

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

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

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

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

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

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

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

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

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

手机屏幕确实比较窄，如果强行塞下 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，在宽大的白框里，电码数字现在非常显眼，发报时眼睛一扫就能看清。

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