モールス信号の基本と、Web Audio API でモールス信号のインプット/アウトプットを実装してみる話。

1. Web Audio API と
モールス信号

2. Table of Contents
1. 自己紹介
2. モールス信号の基本
3. JavaScript で モールス信号
4. ひっかかったところ

3. 自己紹介
- まっは (@mach3ss)
- 横浜で活動するフリーランスの Web デザイナー
- 器用貧乏
- HTML/CSS/JavaScript/Less その他いろいろ
- ピアノ弾いたり惰眠を貪るのがすき

4. モールス信号の基本
モールス信号とは、
2 種類の長さの信号（トン・ツー）を組み合わせて
メッセージのやりとりをする通信法のこと。

5. モールス信号のきまり モールス信号の基本
- 短点（トン）と長点（ツー）で言葉を表現する
- 短点ひとつ分の長さを最小単位とする
- 長点は３トン分
- 各点の間は１トン分あけること
- 文字の間は３トン分あけること
短点（トン）
A
長点（ツー）
B C

6. モールス信号で「HTML5」 モールス信号の基本
H T
L 5
M

7. モールス信号と日本語 モールス信号の基本
- 国際的に使われているのはアルファベットのモールス信号
-「和文モールス」は、アルファベットの符号を「いろは」順に
あてはめたものを基本とする
A
B
C
イ
ロ
ハ
ニ
< 該当なし >

8. モールス信号で「ごはん」 モールス信号の基本
コ ゛（濁点）
ハ ン

9. JavaScript で
モールス信号

10. モールス信号の入出力 JavaScript でモールス信号
JavaScript
手打ち入力
テキスト入力
あ A_
<INPUT> <OUTPUT>
音声で再生
（Web Audio API）
テキスト出力
ボスケテ

11. データの構成をきめる JavaScript でモールス信号
alpha:1111.3.33.1311.11111
kana:3333.11.3111.13131
- 1 でトン、3 でツーをあらわし、文字をドットで区切る
- alpha（アルファベット）か kana（和文）モードを先頭で指定する

12. インプット（手打ち入力） JavaScript でモールス信号
1. ひととおり手打ちで打ってもらい、
ON/OFF の時間を記録しておく。
2. 様々な長さの中から「短点だと思しき長さ」を取得し、
それを元に全ての長さをトン・ツーに丸める。
3. データに変換して保存
ON OFF

13. アウトプット（音声で再生） JavaScript でモールス信号
1. Web Audio API で信号音をループで連続再生する。
2. データの「1313」にあわせたタイミングで
音量を 0 と 1 でトグルしてモールス信号を表現する。
ON ONOFF ONOFF

14. インプット（テキスト入力） JavaScript でモールス信号
1. テキスト内容を変換テーブルと照合してデータにする。
＿人人人人人＿
＞ おわり ＜
￣Y^Y^Y^Y￣

15. アウトプット（テキスト出力） JavaScript でモールス信号
1. データを変換テーブルと照合して文章化する。
＿人人人人人＿
＞ おわり ＜
￣Y^Y^Y^Y￣

16. 再掲 : モールス信号の入出力 JavaScript でモールス信号
JavaScript
手打ち入力
テキスト入力
あ A_
<INPUT> <OUTPUT>
音声で再生
（Web Audio API）
テキスト出力
ボスケテ

17. ひっかかったところ
および課題

18. 開発中の仕様変更 ひっかかったところ
および課題
開発中に、再生開始のメソッドと、音量調節の方法が変わっていた。
< 古い方法 >
`AudioBuffer.gain` と `AudioBuffer.noteOn()` は削除されました。
var ctx = new AudioContext(); // [object AudioContext]
var src = ctx.createBufferSource(); // [object AudioBufferSourceNode]
src.buffer = someBuffer;
src.connect(ctx.destination);
src.gain.value = 0.5;
src.noteOn(0);

19. 開発中の仕様変更 ひっかかったところ
および課題
< 新しいスタンダードな方法 >
新しい API を使うときは最新情報に
きちんとアンテナをはっておく（自戒）
var ctx = new AudioContext(); // [object AudioContext]
var src = ctx.createBufferSource(); // [object AudioBufferSourceNode]
var gain = ctx.createGain(); // [object GainNode]
src.buffer = someBuffer;
src.connect(gain);
gain.connect(ctx.destination);
gain.gain.value = 0.5;
src.start(0);

20. iOS Safari への対応 ひっかかったところ
および課題
■ .ogg のデコードに失敗する
decodeAudioData メソッドで ogg のデータを読ませると
エラーのコールバックで null が返ってくる。
（MacOS X Safari でも同様）
=> Wav や MP3 は正常なのでそちらを使用する
■ ループ再生で隙間があく
AudioBufferSourceNode でループ再生をすると、
ループ毎に余分な隙間が生まれる。
=> どうしよう。

21. ご静聴ありがとうございました。