CodeGrid二周年記念パーティー http://www.zusaar.com/event/5117005 で話した内容です。 リポジトリはこちら https://github.com/kubosho/hearing-test-app

1. Web Audio APIを使って
可聴域を調べるアプリを
つくってみた
@kubosho_

2. 自己紹介
• /kubosho_?/
• 社所属
「 社」でググると一番上に出てきます
• http://blog.o2p.jp/
• へのへのもへじの人
• Web Audio APIに最近触れ始めました

3. 目次
• 可聴域を調べるアプリをつくってみた
• ハマったところ

4. 可聴域を調べる
アプリをつくってみた

5. サンプル
http://kubosho.github.io/hearing-test-app/
AndroidのかたはChromeを使ってください

6. このアプリについて
• 20Hz∼20,000Hzまでの音を出力する
• 周波数はレンジを使って変更することができ
る
• 再生と停止ボタンを使って、自分で任意のタ
イミングで音を鳴らしたり、止めたりするこ
とができる

7. やってること
• 最初に周波数を引数として、init()を呼びだす
内部ではcreateOscillator()で正弦波を作りだし
た後、その正弦波の周波数設定をおこなう
• connect()で作りだした音と出力先をつなぐ
• 再生が押されるとstart()が、停止が押されると
stop()が呼びだされる

8. つくろうと思ったきっかけ

9. つくろうと思ったきっかけ
• Web Audio APIを使って何かしらつくりた
かった
• 聴力検査という言葉にピコンときて、つくろ
うと思った

10. ハマったところ

11. OscillatorNodeが使い捨て
• 再生し停止した後、ふたたび再生しようとし
たら以下のエラーが出た
• Uncaught InvalidStateError: Failed to execute
'start' on 'OscillatorNode': cannot call start
more than once.

12. OscillatorNodeが使い捨て
• OscillatorNodeに限らずAudioNodeは、条件
を満たした際にガベージコレクションされる
• Vue.jsの$watchでisPlaySoundという再生状態
かどうかのフラグを監視して、値がfalseだっ
たら、音を再生成+作った音と出力をつなぐ

13. 終わり

14. 参考文献

15. 参考文献
• Web Audio API (日本語訳): http://
g200kg.github.io/web-audio-api-ja/
• サウンドの生成 | Web Audio APIの基本処理 |
WEB SOUNDER - Web Audio API 解説 -
http://curtaincall.weblike.jp/portfolio-web-
sounder/webaudioapi-basic/oscillator