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
470
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
Haze - Real time background blurring
chrisbanes
1
500
物流システムにおけるリファクタリングとアーキテクチャの再構築 〜依存関係とモジュール分割の重要性〜
deeprain
1
1.2k
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
330
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
これでLambdaが不要に?!Step FunctionsのJSONata対応について
iwatatomoya
2
3.6k
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
170
【re:Growth 2024】 Aurora DSQL をちゃんと話します!
maroon1st
0
770
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
240
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
180
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
4
890
TypeScript でバックもやるって実際どう? 実運用で困ったこと3選
yuichiro_serita
17
7.7k
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
130
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A Tale of Four Properties
chriscoyier
157
23k
BBQ
matthewcrist
85
9.4k
Automating Front-end Workflow
addyosmani
1366
200k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Practical Orchestrator
shlominoach
186
10k
Become a Pro
speakerdeck
PRO
26
5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Mobile First: as difficult as doing things right
swwweet
222
9k
Scaling GitHub
holman
458
140k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
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