Web Audio API とモールス信号

Table of Contents

1. 自己紹介

2. モールス信号の基本

3. JavaScript で モールス信号

4. ひっかかったところ

自己紹介

- まっは (@mach3ss)

- 横浜で活動するフリーランスのWebデザイナー

- 器用貧乏

- HTML/CSS/JavaScript/Less その他いろいろ

- ピアノ弾いたり惰眠を貪るのがすき

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

モールス信号のきまり モールス信号の基本

- 短点（トン）と長点（ツー）で言葉を表現する- 短点ひとつ分の長さを最小単位とする- 長点は３トン分- 各点の間は１トン分あけること- 文字の間は３トン分あけること

短点（トン）

A

長点（ツー）

B C

モールス信号で「HTML5」 モールス信号の基本

H T

L 5

M

モールス信号と日本語 モールス信号の基本

- 国際的に使われているのはアルファベットのモールス信号- 「和文モールス」は、アルファベットの符号を「いろは」順に あてはめたものを基本とする

A

BC

イロハニ

<該当なし >

モールス信号で「ごはん」 モールス信号の基本

コ （゙濁点）

ハ ン

JavaScript でモールス信号

モールス信号の入出力 JavaScript でモールス信号

JavaScript

手打ち入力

テキスト入力あA_

<INPUT> <OUTPUT>

音声で再生（Web Audio API）

テキスト出力ボスケテ

データの構成をきめる JavaScript でモールス信号

alpha:1111.3.33.1311.11111

kana:3333.11.3111.13131

- 1 でトン、3でツーをあらわし、文字をドットで区切る- alpha（アルファベット）か kana（和文）モードを先頭で指定する

インプット（手打ち入力） JavaScript でモールス信号

1. ひととおり手打ちで打ってもらい、 ON/OFFの時間を記録しておく。

2. 様々な長さの中から「短点だと思しき長さ」を取得し、 それを元に全ての長さをトン・ツーに丸める。

3. データに変換して保存

ON OFF

アウトプット（音声で再生） JavaScript でモールス信号

1. Web Audio API で信号音をループで連続再生する。

2. データの「1313」にあわせたタイミングで 音量を0と 1でトグルしてモールス信号を表現する。

ON ONOFF ONOFF

インプット（テキスト入力） JavaScript でモールス信号

1. テキスト内容を変換テーブルと照合してデータにする。

＿人人人人人＿＞　おわり　＜‾Y^Y^Y^Y‾

アウトプット（テキスト出力） JavaScript でモールス信号

1. データを変換テーブルと照合して文章化する。

＿人人人人人＿＞　おわり　＜‾Y^Y^Y^Y‾

再掲 : モールス信号の入出力 JavaScript でモールス信号

JavaScript

手打ち入力

テキスト入力あA_

<INPUT> <OUTPUT>

音声で再生（Web Audio API）

テキスト出力ボスケテ

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

開発中の仕様変更 ひっかかったところおよび課題

開発中に、再生開始のメソッドと、音量調節の方法が変わっていた。

<古い方法 >

`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);

開発中の仕様変更 ひっかかったところおよび課題

<新しいスタンダードな方法 >

新しい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);

iOS Safari への対応 ひっかかったところおよび課題

■ .ogg のデコードに失敗する decodeAudioData メソッドで ogg のデータを読ませると エラーのコールバックで null が返ってくる。 （MacOS X Safari でも同様） => Wav やMP3は正常なのでそちらを使用する

■ ループ再生で隙間があく AudioBufferSourceNodeでループ再生をすると、 ループ毎に余分な隙間が生まれる。 => どうしよう。

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