摩斯电码翻译器

课程目标

• 学习如何通过浏览器 API 来控制视频和音频的播放。
• 本节通过制作一个莫斯电码翻译器，熟悉 JavaScript 事件 DOM 相关知识，学习 JavaScript 音频相关内容.

阅读学习

• MDN 视频和音频 API (opens new window)
• MDN CSS 教程 (opens new window)
• MDN JavaScript 教程 (opens new window)
• 编码：隐匿在计算机软硬件背后的语言 (opens new window) 你可以通过这本书学习摩斯电码原理，以及计算机底层的原理

编码

参考 示例 demo (opens new window) ，运用 HTML+CSS+JS 完成一个摩尔斯码翻译器

国际摩尔斯密码定义一种标准编码方式，将每个字母对应于一个由一系列点和短线组成的字符串，  比如: "a" 对应 ".-", "b" 对应 "-...", "c" 对应 "-.-.", 等等。具体内容可以查看摩斯电码对应表 (opens new window)

如果您还感兴趣的话，还可以上维基百科搜索摩斯电码学习跟过关于摩斯电码的内容

<div class="panels">
  <div class="panel">
    <h3>Morse Code Translation</h3>
    <h1>摩尔斯码翻译器</h1>
    <textarea rows="4" placeholder="輸入英文" id="input">MorseCode</textarea>
    <div class="symbol">⇵</div>
    <textarea rows="4" placeholder="輸入密碼" id="output"></textarea>
    <div class="playlist"> </div>
    <div class="buttons">
      <button class="purple" id="btnMorse">翻译</button>
      <button class="yellow" id="btnEng">解密</button>
      <button class="white" id="btnPlay">播放</button>
    </div>
  </div>
  <div>
    <h3>翻译清单</h3>
    <hr/>
    <ul class="morselist"></ul>
  </div>

  <script>
  //需要用到的摩尔斯加密列表
  var morseCode = "A;.-|B;-...|C;-.-.|D;-..|E;.|F;..-.|G;--.|H;....|I;..|J;.---|K;-.-|L;.-..|M;--|N;-.|O;---|P;.--.|Q;--.-|R;.-.|S;...|T;-|U;..-|V;...-|W;.--|X;-..-|Y;-.--|Z;--..|/;-..-.|1;.----|2;..---|3;...--|4;....-|5;.....|6;-....|7;--...|8;---..|9;----.|0;-----"
  </script>

• 参考实例功能说明图 (opens new window)完成相应的功能
• 将上面给出的摩尔斯字符串渲染到类名为 morselist 的 ul 列表中
• 点击翻译按钮，可以把明文输入框中输入的内容翻译为摩尔斯密文
• 点击点击解码按钮，可以把密文输入框中的摩尔斯码翻译为明文
• 给类名为 symbol 的 div 添加动画效果，点击翻译时实现 360 度翻转效果
• 点击播放按钮，在类名为 playlist 的 div 中，显示摩尔斯码，并且模仿摩尔斯电报音，摩尔斯高亮与音频同步，点播放短的音频，横线播放长音频
• 音频特效材料：提取码: 32j3 (opens new window)

进阶任务

如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。