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
160
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
810
Lions and tigers and handling user capabilities
theophani
1
660
What about the CSSOM?
theophani
3
480
Cutting the fat
theophani
4
580
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
선언형 UI에서의 상태관리
l2hyunwoo
0
250
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
260
Compose UIテストを使った統合テスト
hiroaki404
0
120
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
600
ドメインイベント増えすぎ問題
h0r15h0
2
530
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
290
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
630
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
220
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
540
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
320
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
860
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
490
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Practical Orchestrator
shlominoach
186
10k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Pragmatic Product Professional
lauravandoore
32
6.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
112
50k
The Language of Interfaces
destraynor
155
24k
Writing Fast Ruby
sferik
628
61k
Thoughts on Productivity
jonyablonski
68
4.4k
Site-Speed That Sticks
csswizardry
2
220
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
Designing Experiences People Love
moore
139
23k
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