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
170
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
850
Lions and tigers and handling user capabilities
theophani
1
700
What about the CSSOM?
theophani
3
520
Cutting the fat
theophani
4
610
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
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
Design Foundational Data Engineering Observability
sucitw
3
190
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
140
Navigating Dependency Injection with Metro
zacsweers
3
230
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
720
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
Testing Trophyは叫ばない
toms74209200
0
850
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
210
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
480
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Become a Pro
speakerdeck
PRO
29
5.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Visualization
eitanlees
148
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
A Modern Web Designer's Workflow
chriscoyier
696
190k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
It's Worth the Effort
3n
187
28k
The Cult of Friendly URLs
andyhume
79
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Thoughts on Productivity
jonyablonski
70
4.8k
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