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
850
Lions and tigers and handling user capabilities
theophani
1
700
What about the CSSOM?
theophani
3
520
Cutting the fat
theophani
4
610
When to use Ajax and when to reload
theophani
6
1.8k
Version Control All The Codes
theophani
12
1.3k
Design Processes, Not Interfaces
theophani
5
1.8k
Other Decks in Programming
See All in Programming
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
AIエージェント開発、DevOps and LLMOps
ymd65536
1
380
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
350
TanStack DB ~状態管理の新しい考え方~
bmthd
2
480
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
20
5k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
2
240
アセットのコンパイルについて
ojun9
0
110
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
🔨 小さなビルドシステムを作る
momeemt
3
660
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.2k
Kiroで始めるAI-DLC
kaonash
2
560
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Site-Speed That Sticks
csswizardry
10
810
Designing for humans not robots
tammielis
253
25k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Docker and Python
trallard
45
3.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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