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
780
Lions and tigers and handling user capabilities
theophani
1
630
What about the CSSOM?
theophani
3
440
Cutting the fat
theophani
4
550
When to use Ajax and when to reload
theophani
6
1.7k
Version Control All The Codes
theophani
12
1.1k
Design Processes, Not Interfaces
theophani
5
1.7k
Other Decks in Programming
See All in Programming
Namespace on read
tagomoris
2
370
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
CSC307 Lecture 09
javiergs
PRO
1
500
CSC307 Lecture 07
javiergs
PRO
0
220
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
CSC307 Lecture 14
javiergs
PRO
0
220
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
How to use Macrobenchmark
veronikapj
0
160
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
リハビリmruby
kishima
1
160
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
37
2.2k
A Tale of Four Properties
chriscoyier
155
22k
Building Adaptive Systems
keathley
34
2k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Automating Front-end Workflow
addyosmani
1362
200k
Unsuck your backbone
ammeep
666
57k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Adopting Sorbet at Scale
ufuk
71
8.8k
Docker and Python
trallard
37
2.9k
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