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
大規模アプリにおけるXcode Previews実用化までの道のり
ikesyo
0
920
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
460
dynamic!
moro
9
3.8k
CSC509 Lecture 03
javiergs
PRO
0
300
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
2
220
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
200
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
140
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
510
defer f()とdefer fの挙動を 誤解していた話
kogamochiduki
2
130
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
880
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
180
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
KATA
mclloyd
32
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Practical Orchestrator
shlominoach
190
11k
A Modern Web Designer's Workflow
chriscoyier
697
190k
For a Future-Friendly Web
brad_frost
180
9.9k
It's Worth the Effort
3n
187
28k
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