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
200
1
Share
WebAudio
GET EXCITED AND PLAY!!
Tiffany Conroy
October 01, 2012
More Decks by Tiffany Conroy
See All by Tiffany Conroy
Beautiful Authentication: Tear down the barbed wire
theophani
3
860
Lions and tigers and handling user capabilities
theophani
1
730
What about the CSSOM?
theophani
3
570
Cutting the fat
theophani
4
630
When to use Ajax and when to reload
theophani
6
1.8k
Version Control All The Codes
theophani
12
1.3k
Design Processes, Not Interfaces
theophani
5
1.8k
Other Decks in Programming
See All in Programming
의존성 주입과 모듈화
fornewid
0
150
AI時代のPhpStorm最新事情 #phpcon_odawara
yusuke
0
240
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
hadashia
2
1.3k
【26新卒研修】OpenAPI/Swagger REST API研修
dip_tech
PRO
0
110
The Less-Told Story of Socket Timeouts
coe401_
3
850
AIエージェントで業務改善してみた
taku271
0
550
t *testing.T は どこからやってくるの?
otakakot
1
850
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
kiichisugihara
1
210
Back to the roots of date
jinroq
0
590
YJITとZJITにはイカなる違いがあるのか?
nakiym
0
270
Import assertionsが消えた日~ECMAScriptの仕様はどう決まり、なぜ覆るのか~
bicstone
2
150
ふりがな Deep Dive try! Swift Tokyo 2026
watura
0
250
Featured
See All Featured
A better future with KSS
kneath
240
18k
KATA
mclloyd
PRO
35
15k
RailsConf 2023
tenderlove
30
1.4k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.4k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.2k
The Pragmatic Product Professional
lauravandoore
37
7.2k
What does AI have to do with Human Rights?
axbom
PRO
1
2.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Talk to Developers About Accessibility
jct
2
190
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Marketing to machines
jonoalderson
1
5.2k
Skip the Path - Find Your Career Trail
mkilby
1
110
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