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
820
Lions and tigers and handling user capabilities
theophani
1
660
What about the CSSOM?
theophani
3
480
Cutting the fat
theophani
4
590
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
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
750
Pulsar2 を雰囲気で使ってみよう
anoken
0
240
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1k
sappoRo.R #12 初心者セッション
kosugitti
0
260
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
120
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
120
Introduction to kotlinx.rpc
arawn
0
710
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
800
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
540
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
110
Featured
See All Featured
Visualization
eitanlees
146
15k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
It's Worth the Effort
3n
184
28k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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