Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Upcoming SlideShare
Web Audio APIの初歩
Web Audio APIの初歩
Loading in …3
×

Check these out next

1 of 15 Ad
1 of 15 Ad

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

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Advertisement

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

×