Los nuevos paradigmas de computación como el Cloud Computing y los escenarios sugeridos en torno a la Internet del Futuro indican la próxima prevalencia de Web como entorno de ejecución de aplicaciones. Los desarrollos de estándares que posibilitan este cambio tienen a HTML5 como referencia. Sin embargo, a pesar de las múltiples APIs que han sido desarrolladas para igualar o incluso superar a tecnologías web anteriores a este estándar, la funcionalidad de reproducción, generación y análisis de audio está todavía en una fase definitoria en la que varias implementaciones compiten por lograr ser reconocidas como el estándar de facto. En esta presentación repasaremos estas API, aportando explicaciones de su funcionalidad y ejemplos de su uso.

1. LAS NUEVAS API DE AUDIO EN
Pablo Garaizar Sagarminaga

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

3. ¿HTML5?

4. Timed
Canvas Web
media
2D API playback Storage
MIME type
and protocol Document
handler
Microdata
editing
registration
Cross-
Browser Drag
document
history messaging & drop

5. Web
Geolocation SQL File API
Database
WebGL SVG CSS3
The
Web Indexed Web
Workers Database sockets
API

6. JS
HTML5 CSS3
APIs

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

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

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

10. <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>
Flash

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

12. En resumen...

13. Elementos HTML no
estándar

14. Abuso de elementos para
embeber contenido no
propio de HTML

15. Necesidad de plugins no
estándar

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

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

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

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

22. 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
El caos de los códecs

23. <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>
¿Solución? Múltiples sub-elementos source

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

25. Canvas
SVG
2D API
WebGL
request
Animation ...
Frame

26. ¡Qué bueno sería tener una
API estándar en HTML5 para
manipular audio!

27. Las nuevas API de audio
para la Web
(nuevas → más de una, no hay un solo estándar)

29. Audio Data API

30. Propuesta por Mozilla
(implementada en FF4+)
Extiende <audio> y <video>
API basada en eventos
(loadedmetadata, MozAudioAvailable)
Audio Data API

31. Evento estándar
Definido en HTML5
+ mozChannels
Metadatos adicionales mozSampleRate
mozFrameBufferLength
Audio Data API: evento loadedmetadata

32. Generado cada vez que un fragmento de audio está disponible
(≠ ritmo de reproducción del audio)
Array de audio decodificado
(floats en crudo, sin información de volumen, etc.)
Proporciona
Tiempo para esa muestra
(desde el inicio del audio y en segundos)
Audio Data API: evento MozAudioAvailable

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

34. // 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 posición actual del flujo de audio
// medida en muestras
var currentSampleOffset = audioOutput.mozCurrentSampleOffset();
Audio Data API: escribir audio

35. Demos

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

37. Audio Data API
http://videos.mozilla.org/serv/blizzard/audio-slideshow

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

39. Web Audio API

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

41. AudioSourceNode
(AudioBufferSourceNode,
MediaElementAudioSourceNode,
JavaScriptAudioNode)
AudioDestinationNode
DelayNode
AudioContext 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 compresión / expansión
RealtimeAnalyserNode
análisis en tiempo real

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

43. AudioContext
AudioSourceNode AudioDestinationNode
↓
AudioContext
AudioSourceNode AudioGainNode AudioDestinationNode
↓
↓

44. var gainNode = context.createGainNode();
source.connect(gainNode);
gainNode.connect(context.destination);
gainNode.gain.value = 0.5;
Web Audio API: conectar un nodo de ganancia

45. AudioContext
AudioSourceNode A AudioSourceNode B AudioSourceNode C
Waveshaper
LowPass Filter Panner
Distortion
Dry A
Dry B Wet A Wet B Dry C
Dry C
Convolution
Dry Master Gain
Reverb
Dynamics
Compressor
AudioDestinationNode

46. Demos

47. HTML5 Showcase for Web Developers:
The Wow and the How
http://www.htmlfivewow.com/slide60

48. HTML5 Showcase for Web Developers:
The Wow and the How
http://www.htmlfivewow.com/slide64

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

51. Otras API multimedia
para la Web

52. WebRTC API

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

54. WebRTC API

55. HTML Streams API

56. Propuesta de Ian Hickson para la gestión de
múltiples flujos multimedia en HTML5
HTML MediaController API
Sincronizació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
HTML Streams API

57. MediaStream Processing API

58. Objetivo: API común 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

59. Conclusiones

60. Todas las API tienen mucho
potencial
(buen diseño, implementaciones funcionales)

61. No hay una sola forma de
hacer lo mismo
(tampoco la hay en animaciones y nos parece bien)

63. Mi apuesta: Web Audio

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

65. Importante cuota de
mercado en móvil / tablet
(Webkit → Google Chrome + Safari → Android + iOS)

67. ¿Qué uso ahora mismo en
producción?

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

72. Para saber más...

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

74. WHATWG
http://whatwg.org/html

75. Muchas gracias ;-)

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

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