Las nuevas API de audio en HTML5

6,960 views

Published on

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.

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
  • Genial el tema de las api
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,960
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
106
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Las nuevas API de audio en HTML5

  1. 1. LAS NUEVAS API DE AUDIO EN Pablo Garaizar Sagarminaga
  2. 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. 3. ¿HTML5?
  4. 4. TimedCanvas Web media2D API playback Storage MIME typeand protocol Document handler Microdata editing registration Cross-Browser Drag document history messaging & drop
  5. 5. WebGeolocation SQL File API DatabaseWebGL SVG CSS3 The Web Indexed Web Workers Database sockets API
  6. 6. JSHTML5 CSS3 APIs
  7. 7. ¿Cómo ha sido el audio en la Web?
  8. 8. <EMBED src="file.wav"autostart="true" loop="false"volume="100" hidden="true"><NOEMBED> <BGSOUND src="file.wav"></NOEMBED> <EMBED>
  9. 9. <APPLET CODE="Player"SOUND="file.wav"></APPLET> Java
  10. 10. <object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=300 height=300id=player name=player> <param name=movie value=player.swf> <param name=flashvars value=file=file.wav></object> Flash
  11. 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 MicrosoftSilverlight to view this content.</p></object> Silverlight
  12. 12. En resumen...
  13. 13. Elementos HTML no estándar
  14. 14. Abuso de elementos para embeber contenido no propio de HTML
  15. 15. Necesidad de plugins no estándar
  16. 16. ¡Estaría bien que con HTML5 mejorara la cosa!
  17. 17. <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
  18. 18. <audio>// funciones audio.load(); audio.play(); audio.pause();// propiedades audio.currentSrc audio.currentTime audio.duration// eventos loadedmetadata timeupdate pause play ended <audio> en HTML5
  19. 19. Suena bien, ¿verdad? (perdón por el chiste fácil)
  20. 20. MP3 WAV OGGInternet Explorer 9 a  Firefox 4.0+  a aGoogle Chrome 6+ a a aApple Safari 5+ a a Opera 10.6+  a a El caos de los códecs
  21. 21. <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
  22. 22. Pero... HTML5 no se halimitado a incluir <video>para mejorar el aspecto visual
  23. 23. Canvas SVG2D API WebGL requestAnimation ... Frame
  24. 24. ¡Qué bueno sería tener unaAPI estándar en HTML5 para manipular audio!
  25. 25. Las nuevas API de audio para la Web (nuevas → más de una, no hay un solo estándar)
  26. 26. Audio Data API
  27. 27. Propuesta por Mozilla (implementada en FF4+) Extiende <audio> y <video> API basada en eventos (loadedmetadata, MozAudioAvailable) Audio Data API
  28. 28. Evento estándar Definido en HTML5 + mozChannelsMetadatos adicionales mozSampleRate mozFrameBufferLength Audio Data API: evento loadedmetadata
  29. 29. 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
  30. 30. 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
  31. 31. // 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(); Audio Data API: escribir audio
  32. 32. Demos
  33. 33. MP3 en Firefox (¡sin patentes!) http://jsmad.org/
  34. 34. Audio Data APIhttp://videos.mozilla.org/serv/blizzard/audio-slideshow
  35. 35. Visualizadorhttp://www.nihilogic.dk/labs/pocket_full_of_html5/#presets/struggle.js
  36. 36. Web Audio API
  37. 37. 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
  38. 38. AudioSourceNode (AudioBufferSourceNode, MediaElementAudioSourceNode, JavaScriptAudioNode) AudioDestinationNode DelayNodeAudioContext 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
  39. 39. 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
  40. 40. AudioContext AudioSourceNode AudioDestinationNode ↓AudioContextAudioSourceNode AudioGainNode AudioDestinationNode ↓ ↓
  41. 41. var gainNode = context.createGainNode();source.connect(gainNode);gainNode.connect(context.destination);gainNode.gain.value = 0.5;Web Audio API: conectar un nodo de ganancia
  42. 42. 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
  43. 43. Demos
  44. 44. HTML5 Showcase for Web Developers: The Wow and the Howhttp://www.htmlfivewow.com/slide60
  45. 45. HTML5 Showcase for Web Developers: The Wow and the Howhttp://www.htmlfivewow.com/slide64
  46. 46. WebAudio Drum Machinehttp://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html
  47. 47. Otras API multimedia para la Web
  48. 48. WebRTC API
  49. 49. 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
  50. 50. WebRTC API
  51. 51. HTML Streams API
  52. 52. Propuesta de Ian Hickson para la gestión de múltiples flujos multimedia en HTML5 HTML MediaController API Sincronización de elementos multimedia en HTMLRelacionada con... Captura y grabación de audio y vídeo local Otras API de gestión de streaming multimedia HTML Streams API
  53. 53. MediaStream Processing API
  54. 54. Objetivo: API común que englobe a todas lasque 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
  55. 55. Conclusiones
  56. 56. Todas las API tienen mucho potencial (buen diseño, implementaciones funcionales)
  57. 57. No hay una sola forma de hacer lo mismo (tampoco la hay en animaciones y nos parece bien)
  58. 58. Mi apuesta: Web Audio
  59. 59. Más eficiente y fácil de usar (deja más trabajo “duro” a C++ y menos a JavaScript)
  60. 60. Importante cuota demercado en móvil / tablet (Webkit → Google Chrome + Safari → Android + iOS)
  61. 61. ¿Qué uso ahora mismo en producción?
  62. 62. Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  63. 63. Para saber más...
  64. 64. W3Chttp://dev.w3.org/html5/spec/Overview.html
  65. 65. WHATWGhttp://whatwg.org/html
  66. 66. Muchas gracias ;-)
  67. 67. 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
  68. 68. Todas las imágenes son propiedad de sus respectivos dueños*, el resto delcontenido está licenciado con la licencia Creative Commons by-sa 3.0 * W3C, WHATWG, Google, Memegenerator.net, Troll.me

×