Web Audio APIを使って 可聴域を調べるアプリを

つくってみた@kubosho_

自己紹介• /kubosho_?/

• 謎社所属「謎社」でググると一番上に出てきます

• http://blog.o2p.jp/

• へのへのもへじの人

• Web Audio APIに最近触れ始めました

目次• 可聴域を調べるアプリをつくってみた

• ハマったところ

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

サンプルhttp://kubosho.github.io/hearing-test-app/

AndroidのかたはChromeを使ってください

このアプリについて• 20Hz～20,000Hzまでの音を出力する

• 周波数はレンジを使って変更することができる

• 再生と停止ボタンを使って、自分で任意のタイミングで音を鳴らしたり、止めたりすることができる

やってること• 最初に周波数を引数として、init()を呼びだす

内部ではcreateOscillator()で正弦波を作りだした後、その正弦波の周波数設定をおこなう

• connect()で作りだした音と出力先をつなぐ

• 再生が押されるとstart()が、停止が押されるとstop()が呼びだされる

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

つくろうと思ったきっかけ• Web Audio APIを使って何かしらつくりたかった

• 聴力検査という言葉にピコンときて、つくろうと思った

ハマったところ

OscillatorNodeが使い捨て• 再生し停止した後、ふたたび再生しようとしたら以下のエラーが出た

• Uncaught InvalidStateError: Failed to execute 'start' on 'OscillatorNode': cannot call start more than once.

OscillatorNodeが使い捨て• OscillatorNodeに限らずAudioNodeは、条件を満たした際にガベージコレクションされる

• Vue.jsの$watchでisPlaySoundという再生状態かどうかのフラグを監視して、値がfalseだったら、音を再生成+作った音と出力をつなぐ

終わり

参考文献

参考文献• 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