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
750
Lions and tigers and handling user capabilities
theophani
1
610
What about the CSSOM?
theophani
3
420
Cutting the fat
theophani
4
540
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
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
530
Goのエラースタックトレースの歴史と今後
sonatard
10
1.8k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.3k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
PHPはいつから死んでいるかの調査
chiroruxx
2
420
AmperとFleetを使ったAndroidアプリ
yoppie
0
260
業務ツールとして使うPostman
msys75
0
110
slow types ってなんだろう?
karad
0
100
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
210
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
130
Fast JSX: Don't clone props object #28768
yossydev
1
190
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.5k
Featured
See All Featured
Designing Experiences People Love
moore
136
23k
Web development in the modern age
philhawksworth
203
10k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
The Mythical Team-Month
searls
217
42k
It's Worth the Effort
3n
180
27k
The Invisible Customer
myddelton
114
12k
Product Roadmaps are Hard
iamctodd
45
9.7k
A designer walks into a library…
pauljervisheath
201
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.3k
Into the Great Unknown - MozCon
thekraken
15
1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Learning to Love Humans: Emotional Interface Design
aarron
267
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