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
840
Lions and tigers and handling user capabilities
theophani
1
680
What about the CSSOM?
theophani
3
500
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
バリデーションライブラリ徹底比較
nayuta999999
1
210
Boast Code Party / RubyKaigi 2025 After Event
lemonade_37
0
300
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
nrslib
0
350
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1k
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
470
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
100
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
6
340
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
820
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
590
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
370
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
180
AWS診断200件の分析から見る頻出指摘と対策
shoodagiri
0
100
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Agile that works and the tools we love
rasmusluckow
329
21k
Making Projects Easy
brettharned
116
6.2k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
A Tale of Four Properties
chriscoyier
159
23k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Navigating Team Friction
lara
185
15k
How GitHub (no longer) Works
holman
314
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
The Invisible Side of Design
smashingmag
299
50k
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