LAS NUEVAS API DE AUDIO EN

Pablo Garaizar Sagarminaga

Agenda

Introduccin a HTML5.

Cmo ha sido el audio en la Web hasta ahora?

Las nuevas API de audio para la Web:

Audio Data API.

Web Audio API.

Otras API multimedia para la Web.

Conclusiones

HTML5?

Canvas

2D API

Timed
media
playback

MIME type
and protocol
handler

Microdata

registration

Browser
history

Web

Storage

Document
editing

Cross-

Drag

messaging

& drop

document

Web
Geolocation

SQL
Database

WebGL

Web
Workers

SVG

The

Indexed

Database
API

File API

CSS3

Web
sockets

HTML5

CSS3

JS

APIs

Cmo ha sido el audio en

la Web?

<EMBED src="file.wav"
autostart="true" loop="false"
volume="100" hidden="true">
<NOEMBED>
<BGSOUND src="file.wav">
</NOEMBED>

<EMBED>

<APPLET CODE="Player"
SOUND="file.wav"></APPLET>

Java

<object classid='clsid:D27CDB6E-AE6D-11cf96B8-444553540000' width='300' height='300'

id='player' name='player'>
<param name='movie' value='player.swf'>
<param name='flashvars'
value='file=file.wav'>
</object>

Flash

<object style="height: 300px; width: 300px;"

type="application/x-silverlight-2"
data="data:application/x-silverlight-2,">
<param value="AudioPlayer.xap"
name="source"/>
<param value="Path=file.wav"
name="initParams"/>
<param value="5.0.61118.0"
name="minRuntimeVersion"/>
<p>You need to install Microsoft
Silverlight to view this content.</p>
</object>

Silverlight

En resumen...

Elementos HTML no
estndar

Abuso de elementos para

embeber contenido no
propio de HTML

Necesidad de plugins no
estndar

Estara bien que con HTML5

mejorara la cosa!

<audio>
<audio src="music.mp3"
autoplay loop="3" controls preload />

<video>
<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Multimedia en HTML5

<audio>
// funciones
audio.load();
audio.play();
audio.pause();
// propiedades
audio.currentSrc
audio.currentTime
audio.duration
// eventos
loadedmetadata
timeupdate
pause
play
ended

<audio> en HTML5

Suena bien, verdad?

(perdn por el chiste fcil)

MP3

WAV

OGG

Internet Explorer 9

Firefox 4.0+

Google Chrome 6+

Apple Safari 5+

Opera 10.6+

El caos de los cdecs

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mp3" />
Your browser does not support the audio tag.
</audio>

Solucin? Mltiples sub-elementos source

Pero... HTML5 no se ha

limitado a incluir <video>

para mejorar el aspecto
visual

Canvas

SVG

2D API

WebGL

request
Animation
Frame

...

Qu bueno sera tener una

API estndar en HTML5 para

manipular audio!

Las nuevas API de audio

para la Web

(nuevas ms de una, no hay un solo estndar)

Audio Data API

Propuesta por Mozilla

(implementada en FF4+)

Extiende <audio> y <video>

API basada en eventos

(loadedmetadata, MozAudioAvailable)

Audio Data API

Evento estndar
Definido en HTML5

+
Metadatos adicionales

mozChannels

mozSampleRate

mozFrameBufferLength

Audio Data API: evento loadedmetadata

Generado cada vez que un fragmento de audio est disponible

( ritmo de reproduccin del audio)

Array de audio decodificado

(floats en crudo, sin informacin de volumen, etc.)

Proporciona
Tiempo para esa muestra

(desde el inicio del audio y en segundos)

Audio Data API: evento MozAudioAvailable

var channels,
rate,
frameBufferLength,
samples;
function audioInfo() {
var audio = document.getElementById('audio');

// Metadatos propios de la Audio Data API

channels
= audio.mozChannels;
rate
= audio.mozSampleRate;
frameBufferLength = audio.mozFrameBufferLength;
function audioAvailable(event) {
var samples = event.frameBuffer,
time
= event.time;

for (var i = 0; i < frameBufferLength; i++) {

// processSample har lo que sea necesario con el audio
processSample(samples[i], channels, rate);
}

Audio Data API: leer audio y procesarlo

// Creamos un elemento <audio>

var audioOutput = new Audio();
// Lo configuramos con dos canales a 44.1 KHz
audioOutput.mozSetup(2, 44100);
// Preparamos un array con las muestras y las escribimos
var samples = [0.242, 0.127, 0.0, -0.058, -0.242, ...];
var numberSamplesWritten = audioOutput.mozWriteAudio(samples);
// Obtenemos la posicin actual del flujo de audio
// medida en muestras
var currentSampleOffset = audioOutput.mozCurrentSampleOffset();

Audio Data API: escribir audio

Demos

MP3 en Firefox (sin patentes!)

http://jsmad.org/

Audio Data API

http://videos.mozilla.org/serv/blizzard/audio-slideshow

Visualizador
http://www.nihilogic.dk/labs/pocket_full_of_html5/#presets/struggle.js

Web Audio API

Propuesta por Google

(implementada en Chrome10+)

AudioContext y AudioNode
(poco que ver con <audio>)

API a alto nivel

(mucha funcionalidad ya implementada)

Web Audio API

AudioSourceNode
(AudioBufferSourceNode,

MediaElementAudioSourceNode,
JavaScriptAudioNode)

AudioDestinationNode

AudioContext

DelayNode
retardos ajustables

AudioGainNode
ganancia

AudioPannerNode
audio en 3D

AudioNodes

ConvolverNode
efectos de espacio, reverb

BiquadFilterNode

filtros paso-bajo, paso-alto, paso-banda...

WaveShaperNode
efectos no-lineales, distorsiones

DynamicsCompressorNode
efectos de compresin / expansin

RealtimeAnalyserNode
anlisis en tiempo real

var context = new webkitAudioContext();

var buffer = context.createBuffer(1, BUFFER_SIZE, SAMPLE_RATE);
var bufferData = buffer.getChannelData(0);
var samples = (duration / 1000) * SAMPLE_RATE;
for (i = 0; i < samples; i++) {
bufferData[i] = Math.sin(pitch * PI_2 * i / SAMPLE_RATE);
}
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.noteOn(0);

Web Audio API: hacer sonar un tono

AudioSourceNode

AudioContext
AudioDestinationNode

AudioGainNode

AudioSourceNode

AudioContext
AudioDestinationNode

var gainNode = context.createGainNode();

source.connect(gainNode);
gainNode.connect(context.destination);
gainNode.gain.value = 0.5;

Web Audio API: conectar un nodo de ganancia

AudioContext
AudioSourceNode A

AudioSourceNode B
Waveshaper

LowPass Filter

Dry A

Dry B

AudioSourceNode C

Panner

Distortion

Wet A

Dry C

Wet B

Dry C

Convolution

Dry Master Gain

Dynamics

Reverb

Compressor
AudioDestinationNode

Demos

HTML5 Showcase for Web Developers:

The Wow and the How
http://www.htmlfivewow.com/slide60

HTML5 Showcase for Web Developers:

The Wow and the How
http://www.htmlfivewow.com/slide64

WebAudio Drum Machine

http://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html

Otras API multimedia

para la Web

WebRTC API

Objetivo: proporcionar Comunicacin en Tiempo Real en la Web

Sin plugins, sin instalaciones extra, etc.
Solamente JavaScript y HTML5 (+ API en C++ en el navegador)

Escenarios: streaming, videoconferencia, etc.

(implementacin funcional para Google Chrome)

WebRTC API

WebRTC API

HTML Streams API

Propuesta de Ian Hickson para la gestin de

mltiples flujos multimedia en HTML5

HTML MediaController API

Sincronizacin de elementos multimedia en HTML

Relacionada con...

Captura y grabacin de audio y vdeo local

Otras API de gestin de streaming multimedia

HTML Streams API

MediaStream Processing API

Objetivo: API comn que englobe a todas las

que gestionan contenido multimedia en tiempo real
HTML5 <audio> y <video>
HTML Streams API

HTML MediaController

Audio Data API

Web Audio API

WebRTC API

MediaStream Processing API

Conclusiones

Todas las API tienen mucho

potencial
(buen diseo, implementaciones funcionales)

No hay una sola forma de

hacer lo mismo
(tampoco la hay en animaciones y nos parece bien)

Mi apuesta: Web Audio

Ms eficiente y fcil de usar

(deja ms trabajo duro a C++ y menos a JavaScript)

Importante cuota de
mercado en mvil / tablet
(Webkit Google Chrome + Safari Android + iOS)

Qu uso ahora mismo en

produccin?

Polyfills
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Para saber ms...

W3C
http://dev.w3.org/html5/spec/Overview.html

WHATWG
http://whatwg.org/html

Muchas gracias ;-)

Referencias

Web Audio API, W3C Audio Group Proposal

Getting Started with Web Audio API, HTML5 Rocks Tutorials

Web Audio Examples

Audio Data API, MozillaWiki

Mozilla Audio Data API

WebRTC

WebRTC MediaStream Integration

MediaStream Processing API, Draft Proposal

HTML5 Audio APIs - How Low can we Go?, Mark Boas

Todas las imgenes son propiedad de sus

respectivos dueos*, el resto del

contenido est licenciado con la licencia

Creative Commons by-sa 3.0

* W3C, WHATWG, Google, Memegenerator.net, Troll.me