LAS NUEVAS API DE AUDIO EN

Pablo Garaizar Sagarminaga

Agenda● Introducción a HTML5.● ¿Cómo 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?

Timed media

playback

Cross-document messaging

Microdata

Web Storage

Drag& drop

Document editing

Canvas 2D API

Browser history

MIME type and protocol

handler registration

Web SQL

Database

The Indexed Database

API

File API

Websockets

Geolocation

WebWorkers

SVG CSS3WebGL

CSS3JS

APIsHTML5

¿Cómo ha sido el audio en la Web?

<EMBED>

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

<NOEMBED> <BGSOUND src="file.wav"></NOEMBED>

Java

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

Flash

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='300' height='300' id='player' name='player'> <param name='movie' value='player.swf'> <param name='flashvars' value='file=file.wav'></object>

Silverlight

<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>

En resumen...

Elementos HTML no estándar

Abuso de elementos para embeber contenido no

propio de HTML

Necesidad de plugins no estándar

¡Estaría bien que con HTML5 mejorara la cosa!

Multimedia en HTML5

<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>

<audio> en HTML5

<audio>// funciones

audio.load();audio.play();audio.pause();

// propiedades

audio.currentSrcaudio.currentTimeaudio.duration

// eventos

loadedmetadatatimeupdatepauseplayended

Suena bien, ¿verdad?(perdón por el chiste fácil)

El caos de los códecs

MP3 WAV OGG

Internet Explorer 9 a

Firefox 4.0+ a a

Google Chrome 6+ a a a

Apple Safari 5+ a a

Opera 10.6+ a a

¿Solución? Múltiples sub-elementos source

<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>

Pero... HTML5 no se ha limitado a incluir <video> para mejorar el aspecto

visual

WebGL

SVG

...

Canvas 2D API

requestAnimation

Frame

¡Qué bueno sería tener una API estándar en HTML5 para

manipular audio!

Las nuevas API de audio para la Web

(nuevas más de una, → no hay un solo estándar)

Audio Data API

Audio Data API

Propuesta por Mozilla(implementada en FF4+)

Extiende <audio> y <video>

API basada en eventos(loadedmetadata, MozAudioAvailable)

Audio Data API: evento loadedmetadata

Evento estándarDefinido en HTML5

Metadatos adicionales

mozChannels

mozSampleRate

mozFrameBufferLength

+

Audio Data API: evento MozAudioAvailable

Generado cada vez que un fragmento de audio está disponible(≠ ritmo de reproducción del audio)

Proporciona

Tiempo para esa muestra (desde el inicio del audio y en segundos)

Array de audio decodificado(floats en crudo, sin información de volumen, etc.)

Audio Data API: leer audio y procesarlo

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: escribir audio

// Creamos un elemento <audio>var audioOutput = new Audio();

// Lo configuramos con dos canales a 44.1 KHzaudioOutput.mozSetup(2, 44100);

// Preparamos un array con las muestras y las escribimosvar samples = [0.242, 0.127, 0.0, -0.058, -0.242, ...];var numberSamplesWritten = audioOutput.mozWriteAudio(samples);

// Obtenemos la posición actual del flujo de audio // medida en muestrasvar currentSampleOffset = audioOutput.mozCurrentSampleOffset();

Demos

MP3 en Firefox (¡sin patentes!)http://jsmad.org/

Audio Data APIhttp://videos.mozilla.org/serv/blizzard/audio-slideshow

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

Web Audio API

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)

AudioContext

AudioNodes

AudioSourceNode(AudioBufferSourceNode,

MediaElementAudioSourceNode,JavaScriptAudioNode)

AudioDestinationNode

↓

DelayNoderetardos ajustables

AudioGainNodeganancia

AudioPannerNodeaudio en 3D

ConvolverNodeefectos de espacio, reverb

DynamicsCompressorNodeefectos de compresión / expansión

RealtimeAnalyserNodeanálisis en tiempo real

BiquadFilterNodefiltros paso-bajo, paso-alto, paso-banda...

WaveShaperNodeefectos no-lineales, distorsiones

Web Audio API: hacer sonar un tono

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);

AudioContext

↓AudioSourceNode AudioDestinationNode

AudioContext

↓ AudioDestinationNode↓ AudioGainNodeAudioSourceNode

Web Audio API: conectar un nodo de ganancia

var gainNode = context.createGainNode();

source.connect(gainNode);

gainNode.connect(context.destination);

gainNode.gain.value = 0.5;

AudioContext

AudioSourceNode A

Dry A

AudioDestinationNode

LowPass Filter

AudioSourceNode B AudioSourceNode C

Waveshaper Distortion

Panner

ConvolutionReverb

Dry BDry C

Wet A Wet B Dry C

DynamicsCompressor

Dry Master Gain

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 Machinehttp://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html

Otras API multimedia para la Web

WebRTC API

WebRTC API

Objetivo: proporcionar Comunicación 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.(implementación funcional para Google Chrome)

WebRTC API

HTML Streams API

HTML Streams API

Propuesta de Ian Hickson para la gestión de múltiples flujos multimedia en HTML5

HTML MediaController APISincronización de elementos multimedia en HTML

Relacionada con... Captura y grabación de audio y vídeo local

Otras API de gestión de streaming multimedia

MediaStream Processing API

MediaStream Processing API

Objetivo: API común que englobe a todas las que gestionan contenido multimedia en tiempo real

HTML5 <audio> y <video>

Audio Data API Web Audio API

HTML Streams API HTML MediaController

WebRTC API

Conclusiones

Todas las API tienen mucho potencial

(buen diseño, implementaciones funcionales)

No hay una sola forma de hacer lo mismo

(tampoco la hay en animaciones y nos parece bien)

Mi apuesta: Web Audio

Más eficiente y fácil de usar(deja más trabajo “duro” a C++ y menos a JavaScript)

Importante cuota de mercado en móvil / tablet

(Webkit Google Chrome + Safari Android + iOS)→ →

¿Qué uso ahora mismo en producción?

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

Para saber más...

W3Chttp://dev.w3.org/html5/spec/Overview.html

WHATWGhttp://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 imágenes son propiedad de sus respectivos dueños*, el resto del

contenido está licenciado con la licencia Creative Commons by-sa 3.0

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