Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebAudio
Search
Tiffany Conroy
October 01, 2012
Programming
1
160
WebAudio
GET EXCITED AND PLAY!!
Tiffany Conroy
October 01, 2012
Tweet
Share
More Decks by Tiffany Conroy
See All by Tiffany Conroy
Beautiful Authentication: Tear down the barbed wire
theophani
3
810
Lions and tigers and handling user capabilities
theophani
1
660
What about the CSSOM?
theophani
3
480
Cutting the fat
theophani
4
590
When to use Ajax and when to reload
theophani
6
1.8k
Version Control All The Codes
theophani
12
1.2k
Design Processes, Not Interfaces
theophani
5
1.8k
Other Decks in Programming
See All in Programming
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
230
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
7
1.5k
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
140
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
240
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
630
CNCF Project の作者が考えている OSS の運営
utam0k
5
620
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
100
Azure AI Foundryのご紹介
qt_luigi
1
260
Spring gRPC について / About Spring gRPC
mackey0225
0
180
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.6k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
1
540
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
3
310
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Bash Introduction
62gerente
610
210k
Speed Design
sergeychernyshev
25
760
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Six Lessons from altMBA
skipperchong
27
3.6k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
It's Worth the Effort
3n
184
28k
Why Our Code Smells
bkeepers
PRO
335
57k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Transcript
WEBAUDIO
WebAudio != <audio … >
// create new <audio> var audioElement = new Audio();
// create new WebAudio Context var context = new audioContext();
// create new WebAudio Context var context = new webkitAudioContext();
WICKED WEBAUDIO DEMOS http://chromium.googlecode.com/svn/trunk/samples/audio/samples.html
PLAY
audioElement.src = path // check/wait until you can play audioElement.play();
var source = context.createBufferSource(); source.buffer = buffer; source.connect(context.destination); source.noteOn(at); //
PLAY
var source = context.createBufferSource(); source.buffer = buffer; source.connect(context.destination); source.noteOn(at); //
PLAY
var source = context.createBufferSource(); source.buffer = buffer; source.connect(context.destination); source.noteOn(at); //
PLAY
$.ajax({ url: "/path/to/my/sound/file", success: decodeAudioData, requestType: "arraybuffer" });
$.ajax({ url: "/path/to/my/sound/file", success: decodeAudioData, requestType: "arraybuffer" }); NOPE
var request = new XMLHttpRequest(); request.open("GET", "/path/to/sound"); request.responseType = "arraybuffer";
request.onload = decodeAudioData; request.send();
var request = new XMLHttpRequest(); request.open("GET", "/path/to/sound"); request.responseType = "arraybuffer";
request.onload = decodeAudioData; request.send();
var decodeAudioData = function() { context.decodeAudioData( request.response, decodeSuccess); };
var decodeSuccess = function(buffer) { doSomething(buffer); };
var decodeSuccess = function(buffer) { doSomething(buffer); };
var decodeSuccess = function(buffer) { doSomething(buffer); };
I MADE SOME FUNCTIONS github.com/theophani/load-sounds
var loadSound = function(path, callback) { // load the sound
sorta like I showed before };
var loadSounds = function(paths, callback) { // load a bunch
of sounds };
var playSound = function(buffer) { // stuff with source and
context };
Tiffany Conroy github.com/theophani/load-sounds @theophani