Las nuevas API de audio en HTML5
-
Upload
pablo-garaizar -
Category
Technology
-
view
5.664 -
download
0
description
Transcript of Las nuevas API de audio en HTML5
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