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を使って可聴域を調べるアプリをつくってみた

1,428 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Web Audio APIを使って 可聴域を調べるアプリを つくってみた @kubosho_
  2. 2. 自己紹介 • /kubosho_?/ • 社所属
 「 社」でググると一番上に出てきます • http://blog.o2p.jp/ • へのへのもへじの人 • Web Audio APIに最近触れ始めました
  3. 3. 目次 • 可聴域を調べるアプリをつくってみた • ハマったところ
  4. 4. 可聴域を調べる アプリをつくってみた
  5. 5. サンプル http://kubosho.github.io/hearing-test-app/ AndroidのかたはChromeを使ってください
  6. 6. このアプリについて • 20Hz∼20,000Hzまでの音を出力する • 周波数はレンジを使って変更することができ る • 再生と停止ボタンを使って、自分で任意のタ イミングで音を鳴らしたり、止めたりするこ とができる
  7. 7. やってること • 最初に周波数を引数として、init()を呼びだす
 内部ではcreateOscillator()で正弦波を作りだし た後、その正弦波の周波数設定をおこなう • connect()で作りだした音と出力先をつなぐ • 再生が押されるとstart()が、停止が押されると stop()が呼びだされる
  8. 8. つくろうと思ったきっかけ
  9. 9. つくろうと思ったきっかけ • Web Audio APIを使って何かしらつくりた かった • 聴力検査という言葉にピコンときて、つくろ うと思った
  10. 10. ハマったところ
  11. 11. OscillatorNodeが使い捨て • 再生し停止した後、ふたたび再生しようとし たら以下のエラーが出た • Uncaught InvalidStateError: Failed to execute 'start' on 'OscillatorNode': cannot call start more than once.
  12. 12. OscillatorNodeが使い捨て • OscillatorNodeに限らずAudioNodeは、条件 を満たした際にガベージコレクションされる • Vue.jsの$watchでisPlaySoundという再生状態 かどうかのフラグを監視して、値がfalseだっ たら、音を再生成+作った音と出力をつなぐ
  13. 13. 終わり
  14. 14. 参考文献
  15. 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

×