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を使って
可聴域を調べるアプリを
つくってみた
@kubosho_
自己紹介
• /kubosho_?/
• 社所属

「 社」でググると一番上に出てきます
• http://blog.o2p.jp/
• へのへのもへじの人
• Web Audio APIに最近触れ始めました
目次
• 可聴域を調べるアプリをつくってみた
• ハマったところ
可聴域を調べる
アプリをつくってみた
サンプル
http://kubosho.github.io/hearing-test-app/
AndroidのかたはChromeを使ってください
このアプリについて
• 20Hz∼20,000Hzまでの音を出力する
• 周波数はレンジを使って変更することができ
る
• 再生と停止ボタンを使って、自分で任意のタ
イミングで音を鳴らしたり、止めたりするこ
とができる
やってること
• 最初に周波数を引数として、init()を呼びだす

内部ではcreateOscillator()で正弦波を作りだし
た後、その正弦波の周波数設定をおこなう
• connect()で作りだした音と出力先をつなぐ
• 再生が押され...
つくろうと思ったきっかけ
つくろうと思ったきっかけ
• Web Audio APIを使って何かしらつくりた
かった
• 聴力検査という言葉にピコンときて、つくろ
うと思った
ハマったところ
OscillatorNodeが使い捨て
• 再生し停止した後、ふたたび再生しようとし
たら以下のエラーが出た
• Uncaught InvalidStateError: Failed to execute
'start' on 'Oscilla...
OscillatorNodeが使い捨て
• OscillatorNodeに限らずAudioNodeは、条件
を満たした際にガベージコレクションされる
• Vue.jsの$watchでisPlaySoundという再生状態
かどうかのフラグを監視し...
終わり
参考文献
参考文献
• Web Audio API (日本語訳): http://
g200kg.github.io/web-audio-api-ja/
• サウンドの生成 | Web Audio APIの基本処理 |
WEB SOUNDER - Web...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
20141202 JAWS-UG Kansai 特別編 LT大会「AWSゆく年、来る年」- jawsug kansai special lt
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

2,156

On Slideshare

0

From embeds

0

Number of embeds

524

Actions

Downloads

5

Shares

0

Comments

0

Likes

0

×