Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
WebAudio
Tiffany Conroy
October 01, 2012
Programming
1
150
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
630
Lions and tigers and handling user capabilities
theophani
1
540
What about the CSSOM?
theophani
3
290
Cutting the fat
theophani
4
500
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.5k
Other Decks in Programming
See All in Programming
読みやすいコード クラスメソッド 2022 年度新卒研修
januswel
0
2.9k
パラメタライズドテスト
ledsun
0
220
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
uggds
32
13k
OSS貢献を気軽にしたい Let's Go Talk #1
yuyaabo
2
230
How to start contributing to Kubernetes Projects
ydfu
0
130
SGGとは
inoue2002
0
430
Enzyme から React Native Testing Library に移行した経緯 / 2022-07-20
tamago3keran
1
160
「混ぜるな危険」を推進する設計
minodriven
8
2.5k
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.6k
Google I/O 2022 Android関連概要 / Google I/O 2022 Android summary
phicdy
0
380
Computer Vision Seminar 1/コンピュータビジョンセミナーvol.1 OpenCV活用
fixstars
0
140
プロダクトのタイプ別 GraphQL クライアントの選び方
shozawa
0
8.2k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
319
19k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Thoughts on Productivity
jonyablonski
44
2.4k
KATA
mclloyd
7
8.8k
We Have a Design System, Now What?
morganepeng
35
3k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k
GraphQLとの向き合い方2022年版
quramy
16
8.4k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Producing Creativity
orderedlist
PRO
334
37k
Raft: Consensus for Rubyists
vanstee
127
5.5k
Navigating Team Friction
lara
175
11k
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