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 入門 
増井研 学部4年 杉浦颯太
自己紹介 
• 杉浦 颯太 (すぎうらそうた) 
• 学部4年 
• 競技プログラミングとかCTFとか 
- 解いてばっか 
• 音に興味あり - 可聴化とかカッコイイ 
- と言いつつ研究テーマは決まっていません( ꒪⌓꒪) 
• Twitt...
What’s Web Audio API ? 
• ざっくり言うとWeb上で音声ファイルをいじいじできる 
• <audio>タグの上位互換 
• <audio>タグで実現できないことができる 
• 発展途上な印象 
- いまいち流行ってない?...
比較 
audioタグWeb Audio API 
再生できるできる 
録音できないできる 
編集・加工できないできる 
タイミングの指定精度が低いできる
みんな大好きJavaScript 
• Web Audio APIはJavaScriptで操作する 
• JSと連携して音を出すことが可能 
• ボタン押すとかスクロールするとか 
• 実装が簡単 
• 複数音源を扱ったりいろいろ凝る場合は工夫...
デモ 
http://sota1235.net/webAudioAPI/
実装 
• `AudioContext`もしくは`webkitAudioContext`インスタンスを生成
実装 
• 生成したインスタンスにGETした音源のデータをセット 
• -> 音源データが返ってくる
実装 
• 音源データをセット、再生 
• sourceは毎回使い捨て
なぜ音がほしいの 
• 音が出てるサイトは大抵BGMで使われてる印象(もったいない!) 
• ちょっと工夫されてても、ネイティブアプリの機能には勝てない 
• DJソフトとかGarageBand(Mac)とか 
• BGMとかじゃなく、Webア...
Web Audio APIの今後に期待 
• おそらく今後も機能が追加されていく 
• ほぼ全てのブラウザで対応済み 
• iPhoneのSafariでアクセスしたら動いた 
• IEなんてなかった 
• 何か面白いものを作れたらいいなぁ
ご静聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Web Audio API 入門

1,579 views

Published on

Web Audio API 入門

Published in: Internet
  • Be the first to comment

Web Audio API 入門

  1. 1. Web Audio API 入門 増井研 学部4年 杉浦颯太
  2. 2. 自己紹介 • 杉浦 颯太 (すぎうらそうた) • 学部4年 • 競技プログラミングとかCTFとか - 解いてばっか • 音に興味あり - 可聴化とかカッコイイ - と言いつつ研究テーマは決まっていません( ꒪⌓꒪) • Twitter, GitHub : sota1235
  3. 3. What’s Web Audio API ? • ざっくり言うとWeb上で音声ファイルをいじいじできる • <audio>タグの上位互換 • <audio>タグで実現できないことができる • 発展途上な印象 - いまいち流行ってない? - というかggると動かないコードばっか落ちてる
  4. 4. 比較 audioタグWeb Audio API 再生できるできる 録音できないできる 編集・加工できないできる タイミングの指定精度が低いできる
  5. 5. みんな大好きJavaScript • Web Audio APIはJavaScriptで操作する • JSと連携して音を出すことが可能 • ボタン押すとかスクロールするとか • 実装が簡単 • 複数音源を扱ったりいろいろ凝る場合は工夫が必要
  6. 6. デモ http://sota1235.net/webAudioAPI/
  7. 7. 実装 • `AudioContext`もしくは`webkitAudioContext`インスタンスを生成
  8. 8. 実装 • 生成したインスタンスにGETした音源のデータをセット • -> 音源データが返ってくる
  9. 9. 実装 • 音源データをセット、再生 • sourceは毎回使い捨て
  10. 10. なぜ音がほしいの • 音が出てるサイトは大抵BGMで使われてる印象(もったいない!) • ちょっと工夫されてても、ネイティブアプリの機能には勝てない • DJソフトとかGarageBand(Mac)とか • BGMとかじゃなく、Webアプリの機能と連携して気軽に使えたらよい
  11. 11. Web Audio APIの今後に期待 • おそらく今後も機能が追加されていく • ほぼ全てのブラウザで対応済み • iPhoneのSafariでアクセスしたら動いた • IEなんてなかった • 何か面白いものを作れたらいいなぁ
  12. 12. ご静聴ありがとうございました

×