Upload
hisashi-oikawa
View
724
Download
0
Embed Size (px)
DESCRIPTION
モールス信号の基本と、Web Audio API でモールス信号のインプット/アウトプットを実装してみる話。
Citation preview
Web Audio API とモールス信号
Table of Contents
1. 自己紹介
2. モールス信号の基本
3. JavaScript で モールス信号
4. ひっかかったところ
自己紹介
- まっは (@mach3ss)
- 横浜で活動するフリーランスのWebデザイナー
- 器用貧乏
- HTML/CSS/JavaScript/Less その他いろいろ
- ピアノ弾いたり惰眠を貪るのがすき
モールス信号の基本モールス信号とは、2種類の長さの信号(トン・ツー)を組み合わせてメッセージのやりとりをする通信法のこと。
モールス信号のきまり モールス信号の基本
- 短点(トン)と長点(ツー)で言葉を表現する- 短点ひとつ分の長さを最小単位とする- 長点は3トン分- 各点の間は1トン分あけること- 文字の間は3トン分あけること
短点(トン)
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でループ再生をすると、 ループ毎に余分な隙間が生まれる。 => どうしよう。
ご静聴ありがとうございました。