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
210
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
870
Lions and tigers and handling user capabilities
theophani
1
750
What about the CSSOM?
theophani
3
590
Cutting the fat
theophani
4
650
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.9k
Other Decks in Programming
See All in Programming
属人化した知識を、 AIが辿れる地図にする
pkshadeck
PRO
1
140
Lean は証明の正しさを確認するためだけのツールって思ってませんか?
inoueasei
1
140
Claude Code全社展開のためにやったことn選~プラグイン302個・コミッター271人を支えるために~
kenchan
4
1.3k
Apache Hive: そしてCloud Native Lakehouseへ
okumin
1
200
言葉の格闘技のススメ~紙とペンと言葉から始める、キャリアの描き方~
progresscicada
1
120
PHP に部分適用が来るぞ!……ところで何それ?おいしいの? #phpcon / phpcon-2026
shogogg
0
550
Claude Team Plan導入・ガイド
tk3fftk
0
250
為什麼你並不需要ViewModel / No, you don't need a ViewModel
lovee
1
480
「人を評価する AI」の設計と実装
ryoyanara
0
150
Built Our Own Background Agent at LayerX
layerx
PRO
9
4.9k
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
1.7k
AI Engineeringは、AIプロダクトだけのものか? 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
rkaga
4
360
Featured
See All Featured
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
460
Producing Creativity
orderedlist
PRO
348
40k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
2.2k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
440
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
420
How to Ace a Technical Interview
jacobian
281
24k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
760
We Have a Design System, Now What?
morganepeng
55
8.2k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
340
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
360
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
430
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.9k
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