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
820
Lions and tigers and handling user capabilities
theophani
1
670
What about the CSSOM?
theophani
3
490
Cutting the fat
theophani
4
600
When to use Ajax and when to reload
theophani
6
1.8k
Version Control All The Codes
theophani
12
1.2k
Design Processes, Not Interfaces
theophani
5
1.8k
Other Decks in Programming
See All in Programming
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
330
プログラミング教育のコスパの話
superkinoko
0
120
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.4k
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
560
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
2.8k
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
180
eBPF Updates (March 2025)
kentatada
0
130
読もう! Android build ドキュメント
andpad
1
240
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
130
RCPと宣言型ポリシーについてのお話し
kokitamura
2
150
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
6
3k
PsySHから紐解くREPLの仕組み
muno92
PRO
1
520
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
4 Signs Your Business is Dying
shpigford
183
22k
Typedesign – Prime Four
hannesfritz
41
2.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How STYLIGHT went responsive
nonsquared
99
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Docker and Python
trallard
44
3.3k
Code Reviewing Like a Champion
maltzj
522
39k
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