Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebAudio
Search
Tiffany Conroy
October 01, 2012
Programming
1
180
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
710
What about the CSSOM?
theophani
3
530
Cutting the fat
theophani
4
620
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
Evolving NEWT’s TypeScript Backend for the AI-Driven Era
xpromx
0
270
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
tomohisa
5
18k
TUIライブラリつくってみた / i-just-make-TUI-library
kazto
1
310
Google Antigravity and Vibe Coding: Agentic Development Guide
mickey_kubo
2
130
「文字列→日付」の落とし穴 〜Ruby Date.parseの意外な挙動〜
sg4k0
0
360
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
satoaoaka
0
210
開発に寄りそう自動テストの実現
goyoki
1
440
AIコードレビューがチームの"文脈"を 読めるようになるまで
marutaku
0
310
AIコーディングエージェント(NotebookLM)
kondai24
0
130
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
ayumu_yamaguchi
1
110
手軽に積ん読を増やすには?/読みたい本と付き合うには?
o0h
PRO
1
150
Developing static sites with Ruby
okuramasafumi
0
130
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
Typedesign – Prime Four
hannesfritz
42
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
960
GraphQLとの向き合い方2022年版
quramy
50
14k
Writing Fast Ruby
sferik
630
62k
Embracing the Ebb and Flow
colly
88
4.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Practical Orchestrator
shlominoach
190
11k
Fireside Chat
paigeccino
41
3.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