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
190
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
560
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
Coding at the Speed of Thought: The New Era of Symfony Docker
dunglas
0
4.7k
AIエージェントで業務改善してみた
taku271
0
490
Coding as Prompting Since 2025
ragingwind
0
770
CDK Deployのための ”反響定位”
watany
0
260
Strategy for Finding a Problem for OSS: With Real Examples
kibitan
0
140
Redox OS でのネームスペース管理と chroot の実現
isanethen
0
550
LM Linkで(非力な!)ノートPCでローカルLLM
seosoft
0
410
Kubernetes上でAgentを動かすための最新動向と押さえるべき概念まとめ
sotamaki0421
3
440
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
super_marek
0
150
10年分の技術的負債、完済へ ― Claude Code主導のAI駆動開発でスポーツブルを丸ごとリプレイスした話
takuya_houshima
0
1.8k
Running Swift without an OS
kishikawakatsumi
0
360
VueエンジニアがReactを触って感じた_設計の違い
koukimiura
0
160
Featured
See All Featured
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
180
Everyday Curiosity
cassininazir
0
190
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.8k
Rails Girls Zürich Keynote
gr2m
96
14k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
710
How to train your dragon (web standard)
notwaldorf
97
6.6k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
110k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
0
260
How Software Deployment tools have changed in the past 20 years
geshan
0
33k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
340
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