fork download
copy 
  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>Morse code</title>
  5. <style type="text/css">
  6. <!--
  7. BODY {
  8.   line-height: 170%;
  9. }
  10. -->
  11. </style>
  12. <script type="text/javascript">
  13.  
  14. var AudioContext = window.webkitAudioContext || window.AudioContext;
  15. var act = new AudioContext();
  16.  
  17. // 文字間隔は短点3つ分、語間隔は短点7つ分
  18. var mcode = {
  19.  ' ':'0000',
  20.  '_':'0000',
  21.  'A':'102',
  22.  'B':'2010101',
  23.  'C':'2010201',
  24.  'D':'20101',
  25.  'E':'1',
  26.  'F':'1010201',
  27.  'G':'20201',
  28.  'H':'1010101',
  29.  'I':'101',
  30.  'J':'1020202',
  31.  'K':'20102',
  32.  'L':'1020101',
  33.  'M':'202',
  34.  'N':'201',
  35.  'O':'20202',
  36.  'P':'1020201',
  37.  'Q':'2020102',
  38.  'R':'10201',
  39.  'S':'10101',
  40.  'T':'2',
  41.  'U':'10102',
  42.  'V':'1010102',
  43.  'W':'10202',
  44.  'X':'2010102',
  45.  'Y':'2010202',
  46.  'Z':'2020101',
  47.  '0':'202020202',
  48.  '1':'102020202',
  49.  '2':'101020202',
  50.  '3':'101010202',
  51.  '4':'101010102',
  52.  '5':'101010101',
  53.  '6':'201010101',
  54.  '7':'202010101',
  55.  '8':'202020101',
  56.  '9':'202020201',
  57. };
  58.  
  59. var Query = {};
  60.  
  61. function initPage()
  62. {
  63. // Get Query
  64.   if (1 < document.location.search.length) {
  65.     var parameters = document.location.search.substring(1).split('&');
  66.     for (var i = 0; i < parameters.length; i++) {
  67.       var element = parameters[i].split('=');
  68.       Query[ decodeURIComponent(element[0]).toUpperCase() ] = decodeURIComponent(element[1]);
  69.     }
  70.   }
  71.   if( Query['M'] ){
  72.     document.form001.strMorse.value = Query['M'];
  73.   }
  74.   if( Query['F'] ){
  75.     document.form001.frequency.value = parseInt( Query['F'] );
  76.   }
  77.   if( Query['V'] ){
  78.     document.form001.volume.value = parseInt( Query['V'] );
  79.   }
  80.   if( Query['W'] ){
  81.     var w = parseInt( Query['W'] );
  82.     if( w >= 1 && w <= 4 ){
  83.       var w001 = document.form001.wave;
  84.       for (var i = 0; i < w001.length; i++){
  85.         w001[i].checked = (i == w -1);
  86.       }
  87.     }
  88.   }
  89.   if( Query['S'] ){
  90.     document.form001.speed.value = parseInt( Query['S'] );
  91.   }
  92.   if( Query['C'] ){
  93.     document.form001.statusChk.checked = false;
  94.   }
  95. }
  96.  
  97. var soundMutex = false;
  98. var soundData = [];		// [ スタート, 長さ, 文字位置, 文字 ] * n
  99. var soundTick = 60.0/50.0/70;
  100. var soundIndex = 0;
  101. var soundSubIdx = 0;
  102. var soundCh = 0;
  103. var soundT0 = 0;
  104. var soundT9 = 0;
  105.  
  106. function Setup() {
  107.   if( soundMutex ){
  108.     soundIndex = soundData.length + 1;
  109.     soundSubIdx = soundIndex;
  110.     soundT9 = 0;
  111.     return;
  112.   }
  113.   soundData = [];
  114.   var spd = parseInt( document.form001.speed.value );
  115.   var str = document.form001.strMorse.value.toUpperCase();
  116.   var tick = 60.0/50.0/spd;
  117.   soundTick = tick;
  118.   var tock = 0;
  119.   var offset = 0.3;
  120.   for (var i = 0; i < str.length; i++) {
  121.     var ch = str.charAt(i);
  122.     if( !mcode[ch] ){
  123.       continue;
  124.     }
  125.     var mch = mcode[ch];
  126.     for (var j = 0; j < mch.length; j++) {
  127.       switch( mch.charAt(j) ){
  128.       case '0':
  129.         tock += 1;
  130.         break;
  131.       case '1':
  132.         soundData.push( [tick*tock + offset, tick, i, ch] );
  133.         tock += 1;
  134.         break;
  135.       case '2':
  136.         soundData.push( [tick*tock + offset, 3*tick, i, ch] );
  137.         tock += 3;
  138.         break;
  139.       }
  140.     }
  141.     tock += 3;
  142.   }
  143.   soundIndex = 0;
  144.   soundSubIdx = 0;
  145.   soundCh = -1;
  146.   soundT0 = act.currentTime;
  147.   soundT9 = 0;
  148.   if( soundData.length > 0 ){
  149.     soundT9 = soundData[soundData.length-1][0] + soundData[soundData.length-1][1] + 3*tick;
  150.   }
  151.  
  152.   document.form001.statusTxt.value = "";
  153.   document.form001.toggle.value = "STOP";
  154.  
  155.   if( act.state == 'suspended' ){
  156.     act.resume();
  157.   }
  158.   soundMutex = true;
  159.   setTimeout( PlaySound, 0 );
  160. }
  161.  
  162. function PlaySound()
  163. {
  164.   var frq = document.form001.frequency.value;
  165.   var vol = parseInt( document.form001.volume.value ) / 100.0;
  166.   vol = (Math.exp(vol)-1)/(Math.exp(1)-1)
  167.  
  168.   var wav = 'sine';			// sine, triangle, sawtooth, square
  169.   var w001 = document.form001.wave;
  170.   for (var i = 0; i < w001.length; i++){
  171.     if( w001[i].checked ){
  172.       wav = w001[i].value;
  173.     }
  174.   }
  175.  
  176.   var dt1 = act.currentTime - soundT0;
  177.   for(var i = soundIndex; i < soundData.length; i++){
  178.     if( soundData[i][0] - soundTick*3 > dt1 ){
  179.       break;
  180.     }
  181.     var osc = act.createOscillator();
  182.     var gain = act.createGain();
  183.     osc.connect(gain);
  184.     gain.connect(act.destination);
  185.     osc.frequency.value = frq;
  186.     osc.type = wav;
  187.     osc.detune.value = 0;
  188.     gain.gain.value = vol;
  189.     osc.start(soundT0 + soundData[i][0]);
  190.     osc.stop( soundT0 + soundData[i][0] + soundData[i][1] );
  191.     soundIndex = i + 1;
  192.   }
  193.  
  194.   for(var i = soundSubIdx; i < soundData.length; i++){
  195.     if( document.form001.subtitle[0].checked ){
  196.       if( soundData[i][0] - soundTick*2 > dt1 )  break;
  197.     } else {
  198.       if( soundData[i][0]+soundData[i][1] + soundTick*2 > dt1 ){
  199.         break;
  200.       }
  201.       if( i < soundData.length - 1 && soundData[i][2] == soundData[i+1][2] ){
  202.         soundSubIdx = i + 1;
  203.         break;
  204.       }
  205.     }
  206.     if( soundData[i][2] > soundCh ){
  207.       if( !document.form001.subtitle[2].checked ){
  208.         if( soundData[i][2] - soundCh > 1 ){
  209.           document.form001.statusTxt.value += " ";
  210.         }
  211.         document.form001.statusTxt.value += soundData[i][3];
  212.       }
  213.       soundCh = soundData[i][2];
  214.     }
  215.  
  216.     soundSubIdx = i + 1;
  217.   }
  218.  
  219.   if( soundT9 > dt1 ){
  220.     setTimeout( PlaySound, soundTick );
  221.   } else {
  222.     if( act.state == 'running' ){
  223.       act.close();
  224.       act = new AudioContext();
  225.     }
  226.     document.form001.toggle.value = "Start";
  227.     soundMutex = false;
  228.   }
  229. }
  230.  
  231. function SetupJJY()
  232. {
  233.   if( soundMutex ){
  234.     return;
  235.   }
  236.   var dd = new Date();
  237.   var hhmm = ('0'+dd.getHours()).substr(-2,2) + ('0'+dd.getMinutes()).substr(-2,2);
  238.   document.form001.strMorse.value = "JJY JJY " + hhmm + "   N N N N N";
  239. }
  240.  
  241. function statusCls()
  242. {
  243.   document.form001.statusTxt.value = "";
  244. }
  245. </script>
  246. </head>
  247.  
  248. <body onload='initPage()'>
  249. <h1>Morse code</h1>
  250. <br>
  251. <form name="form001">
  252. Text: <input type="text" name="strMorse" size="70">
  253. <input type="button" name="toggle" onclick="Setup()" value="Start"><br>
  254. Frequency: <input type="number" name="frequency" min="20" max="30000" value="440" style="text-align:right;font-family:monospace;"> [Hz]<br>
  255. Volume: <input type="range" name="volume" min="0" max="100" value="3"><br>
  256. Wave:
  257. <input type="radio" name="wave" value="sine" checked>sine
  258. <input type="radio" name="wave" value="triangle">triangle
  259. <input type="radio" name="wave" value="sawtooth">sawtooth
  260. <input type="radio" name="wave" value="square">square
  261. <br>
  262. WPM: <input type="number" name="speed" min="1" max="100" value="20" style="text-align:right;font-family:monospace;"> (作動中は変更を受け付けない)<br>
  263. <br>
  264. <input type="button" onclick="SetupJJY()" value="JJY"><br>
  265. <br>
  266. <div  style="width: 40em; border:1px solid gray; padding: 10px;">
  267. Status: 
  268. <input type="text" name="statusTxt" size="70" readonly style="border: 1px dotted gray;">
  269. <input type="button" onclick="statusCls()" value="CLS"><br>
  270. mode
  271. <input type="radio" name="subtitle" value="P" checked>previous
  272. <input type="radio" name="subtitle" value="A">after
  273. <input type="radio" name="subtitle" value="N">none
  274. </divn>
  275. <br>
  276. </form>
  277.  
  278. </body>
  279. </html>
  280.  
  281. <!--
  282. ※お題
  283. (1) 入力された英数字([A-Z0-9])をモールス信号を表す文字列に変換する。大文字小文字は区別しない。
  284. 　記号は変換出来なくても良い。また数字の略体は不要。短点と長点には何の文字を使っても良いが、
  285. 　なるべく分かり易くするために「・」、「－」等にすること。 
  286.  
  287.  
  288. ※参照
  289.  
  290. コードを音楽にする「コードサウンド」をWebAudioAPIで作った - Qiita:
  291. https://q...content-available-to-author-only...a.com/zaru/items/87a82a3cf6839c692972
  292.  
  293. Web Audio APIでコインの音を作る - Qiita:
  294. https://q...content-available-to-author-only...a.com/mohayonao/items/c506f7ddcaac63694eb9
  295.  
  296. Getting Started with Web Audio API - HTML5 Rocks:
  297. https://w...content-available-to-author-only...s.com/ja/tutorials/webaudio/intro/
  298.  
  299. Web Audio API 解説 - 03.オシレーターの使い方 | g200kg Music & Software:
  300. https://w...content-available-to-author-only...g.com/jp/docs/webaudio/oscillator.html
  301. >なお、このようにあらかじめタイミングを予約する事ができるからと言って、あまりに大量の予約を詰め込む事は推奨されていません。
  302.  
  303.  
  304. ※メモ
  305. Pale Moon だと、実行中に他のタブに切り替えると、ほぼ確実に発声のタイミングなどがおかしくなる。
  306. タブを切り替えなくても偶にずれてるような気がする。
  307. Vivaldi,Kinza だと上記のようなことはないような気がする。
  308.  
  309. 最近のブラウザはローカルファイルでもクエリを受け付けるとは思ってなかった。
  310. 昔やったときは失敗したと思ったけれど、それが間違いだったのかもしれない。
  311.  
  312. 2018/05/19
  313. ステータス出力のタイミングを、モールス符号出力直前と直後を選べるようにした。字幕モードと解読モード。
  314. 2018/05/21
  315. AudioContext.resume()を追加。終了／中途終了時に AudioContext.close() & new AudioContext()。
  316.  
  317. -->
  318.  
Not running #stdin #stdout 0s 0KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
https://ideone.com/9aOhLO
HTML5 + Web Audio API
language:
Text (text 6.10)
created:
7 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!