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
190
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
860
Lions and tigers and handling user capabilities
theophani
1
720
What about the CSSOM?
theophani
3
550
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
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
yamatoya
0
510
CopilotKit + AG-UIを学ぶ
nearme_tech
PRO
1
120
20260228_JAWS_Beginner_Kansai
takuyay0ne
5
440
Claude Codeセッション現状確認 2026福岡 / fukuoka-aicoding-00-beacon
monochromegane
3
380
izumin5210のプロポーザルのネタ探し #tskaigi_msup
izumin5210
1
510
SourceGeneratorのマーカー属性問題について
htkym
0
130
Python’s True Superpower
hynek
0
200
AIに仕事を丸投げしたら、本当に楽になれるのか
dip_tech
PRO
0
180
「やめとこ」がなくなった — 1月にZennを始めて22本書いた AI共創開発のリアル
atani14
0
350
Rで始めるML・LLM活用入門
wakamatsu_takumu
0
150
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
360
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
manfredsteyer
PRO
0
200
Featured
See All Featured
Odyssey Design
rkendrick25
PRO
2
530
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Prompt Engineering for Job Search
mfonobong
0
180
Designing Experiences People Love
moore
143
24k
A Soul's Torment
seathinner
5
2.4k
New Earth Scene 8
popppiees
1
1.7k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
73
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Embracing the Ebb and Flow
colly
88
5k
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