Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Audio API と
モールス信号
Table of Contents
1. 自己紹介
2. モールス信号の基本
3. JavaScript で モールス信号
4. ひっかかったところ
自己紹介
- まっは (@mach3ss)
- 横浜で活動するフリーランスの Web デザイナー
- 器用貧乏
- HTML/CSS/JavaScript/Less その他いろいろ
- ピアノ弾いたり惰眠を貪るのがすき
モールス信号の基本
モールス信号とは、
2 種類の長さの信号(トン・ツー)を組み合わせて
メッセージのやりとりをする通信法のこと。
モールス信号のきまり モールス信号の基本
- 短点(トン)と長点(ツー)で言葉を表現する
- 短点ひとつ分の長さを最小単位とする
- 長点は3トン分
- 各点の間は1トン分あけること
- 文字の間は3トン分あけること
短点(トン)
A
長点(ツ...
モールス信号で「HTML5」 モールス信号の基本
H T
L 5
M
モールス信号と日本語 モールス信号の基本
- 国際的に使われているのはアルファベットのモールス信号
-「和文モールス」は、アルファベットの符号を「いろは」順に
あてはめたものを基本とする
A
B
C
イ
ロ
ハ
ニ
< 該当なし >
モールス信号で「ごはん」 モールス信号の基本
コ ゛(濁点)
ハ ン
JavaScript で
モールス信号
モールス信号の入出力 JavaScript でモールス信号
JavaScript
手打ち入力
テキスト入力
あ A_
<INPUT> <OUTPUT>
音声で再生
(Web Audio API)
テキスト出力
ボスケテ
データの構成をきめる JavaScript でモールス信号
alpha:1111.3.33.1311.11111
kana:3333.11.3111.13131
- 1 でトン、3 でツーをあらわし、文字をドットで区切る
- alpha(アルフ...
インプット(手打ち入力) JavaScript でモールス信号
1. ひととおり手打ちで打ってもらい、
ON/OFF の時間を記録しておく。
2. 様々な長さの中から「短点だと思しき長さ」を取得し、
それを元に全ての長さをトン・ツーに丸める。
...
アウトプット(音声で再生) JavaScript でモールス信号
1. Web Audio API で信号音をループで連続再生する。
2. データの「1313」にあわせたタイミングで
音量を 0 と 1 でトグルしてモールス信号を表現する。
O...
インプット(テキスト入力) 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 ...
開発中の仕様変更 ひっかかったところ
および課題
< 新しいスタンダードな方法 >
新しい API を使うときは最新情報に
きちんとアンテナをはっておく(自戒)
var ctx = new AudioContext(); // [object ...
iOS Safari への対応 ひっかかったところ
および課題
■ .ogg のデコードに失敗する
decodeAudioData メソッドで ogg のデータを読ませると
エラーのコールバックで null が返ってくる。
(MacOS X S...
ご静聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Web Audio API とモールス信号

1,912 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Web Audio API とモールス信号

  1. 1. Web Audio API と モールス信号
  2. 2. Table of Contents 1. 自己紹介 2. モールス信号の基本 3. JavaScript で モールス信号 4. ひっかかったところ
  3. 3. 自己紹介 - まっは (@mach3ss) - 横浜で活動するフリーランスの Web デザイナー - 器用貧乏 - HTML/CSS/JavaScript/Less その他いろいろ - ピアノ弾いたり惰眠を貪るのがすき
  4. 4. モールス信号の基本 モールス信号とは、 2 種類の長さの信号(トン・ツー)を組み合わせて メッセージのやりとりをする通信法のこと。
  5. 5. モールス信号のきまり モールス信号の基本 - 短点(トン)と長点(ツー)で言葉を表現する - 短点ひとつ分の長さを最小単位とする - 長点は3トン分 - 各点の間は1トン分あけること - 文字の間は3トン分あけること 短点(トン) A 長点(ツー) B C
  6. 6. モールス信号で「HTML5」 モールス信号の基本 H T L 5 M
  7. 7. モールス信号と日本語 モールス信号の基本 - 国際的に使われているのはアルファベットのモールス信号 -「和文モールス」は、アルファベットの符号を「いろは」順に あてはめたものを基本とする A B C イ ロ ハ ニ < 該当なし >
  8. 8. モールス信号で「ごはん」 モールス信号の基本 コ ゛(濁点) ハ ン
  9. 9. JavaScript で モールス信号
  10. 10. モールス信号の入出力 JavaScript でモールス信号 JavaScript 手打ち入力 テキスト入力 あ A_ <INPUT> <OUTPUT> 音声で再生 (Web Audio API) テキスト出力 ボスケテ
  11. 11. データの構成をきめる JavaScript でモールス信号 alpha:1111.3.33.1311.11111 kana:3333.11.3111.13131 - 1 でトン、3 でツーをあらわし、文字をドットで区切る - alpha(アルファベット)か kana(和文)モードを先頭で指定する
  12. 12. インプット(手打ち入力) JavaScript でモールス信号 1. ひととおり手打ちで打ってもらい、 ON/OFF の時間を記録しておく。 2. 様々な長さの中から「短点だと思しき長さ」を取得し、 それを元に全ての長さをトン・ツーに丸める。 3. データに変換して保存 ON OFF
  13. 13. アウトプット(音声で再生) JavaScript でモールス信号 1. Web Audio API で信号音をループで連続再生する。 2. データの「1313」にあわせたタイミングで 音量を 0 と 1 でトグルしてモールス信号を表現する。 ON ONOFF ONOFF
  14. 14. インプット(テキスト入力) JavaScript でモールス信号 1. テキスト内容を変換テーブルと照合してデータにする。 _人人人人人_ > おわり <  ̄Y^Y^Y^Y ̄
  15. 15. アウトプット(テキスト出力) JavaScript でモールス信号 1. データを変換テーブルと照合して文章化する。 _人人人人人_ > おわり <  ̄Y^Y^Y^Y ̄
  16. 16. 再掲 : モールス信号の入出力 JavaScript でモールス信号 JavaScript 手打ち入力 テキスト入力 あ A_ <INPUT> <OUTPUT> 音声で再生 (Web Audio API) テキスト出力 ボスケテ
  17. 17. ひっかかったところ および課題
  18. 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. 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. 20. iOS Safari への対応 ひっかかったところ および課題 ■ .ogg のデコードに失敗する decodeAudioData メソッドで ogg のデータを読ませると エラーのコールバックで null が返ってくる。 (MacOS X Safari でも同様) => Wav や MP3 は正常なのでそちらを使用する ■ ループ再生で隙間があく AudioBufferSourceNode でループ再生をすると、 ループ毎に余分な隙間が生まれる。 => どうしよう。
  21. 21. ご静聴ありがとうございました。

×