{"id":326,"date":"2013-03-14T10:27:35","date_gmt":"2013-03-14T10:27:35","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/?p=326"},"modified":"2013-03-21T15:03:37","modified_gmt":"2013-03-21T15:03:37","slug":"audio-en-la-web","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/audio-en-la-web\/","title":{"rendered":"Audio en la web"},"content":{"rendered":"<p>Antes de la aparici\u00f3n de la versi\u00f3n 5 de HTML, si se deseaba incluir audio en una p\u00e1gina web, no quedaban muchas opciones aparte de utilizar la tecnolog\u00eda Flash, propietaria de Adobe. Con HTML5 se introducen nuevas etiquetas que anuncian la incorporaci\u00f3n de audio y v\u00eddeo en la web, sin necesidad de ning\u00fan tipo de <i>plug-in<\/i>, ya que el navegador es capaz de entenderlas. Pero \u00bfhasta qu\u00e9 punto es cierto?<\/p>\n<h2>La etiqueta <i>audio<\/i><\/h2>\n<p>La especificaci\u00f3n de HTML5 introduce el <i>tag<\/i> o etiqueta <i>audio<\/i>, de modo an\u00e1logo a la etiqueta <i>video<\/i>, juntamente con funcionalidades b\u00e1sicas de reproducci\u00f3n de archivos de audio pregrabado y consulta de atributos sencillos, como la duraci\u00f3n. Gracias a este hecho, efectivamente ya no se necesita ning\u00fan <i>plug-in<\/i> para manejar sonido (darle al <i>play<\/i> y al <i>stop<\/i>, por ejemplo) en la p\u00e1gina web.<\/p>\n<h2>\u00bfEs suficiente?<\/h2>\n<p>Con las funcionalidades asociadas a la etiqueta <i>audio<\/i>, plantearse realizar, por ejemplo, un piano que suene en tiempo real sobre el propio navegador deviene una tarea que, si bien es resoluble, no es trivial. La idea es llevarlo a cabo a partir de ficheros de sonido cortos, ya sea preconstruidos o construy\u00e9ndolos mientras se ejecuta la p\u00e1gina web (<a href=\"http:\/\/codebase.es\/riffwave\/\"><i>http:\/\/codebase.es\/riffwave\/<\/i><\/a>). Esta t\u00e9cnica se quedaba corta en otro tipo de tareas, como la aplicaci\u00f3n de filtros o efectos personalizados al sonido que se est\u00e9 captando con el micr\u00f3fono, por ejemplo, ya que no se puede partir de un archivo pregrabado y concatenar en forma de archivos cortos el audio que va llegando por el micr\u00f3fono, esto no daba buenos resultados (<a href=\"http:\/\/acko.net\/blog\/javascript-audio-synthesis-with-html-5\/\"><i>http:\/\/acko.net\/blog\/javascript-audio-synthesis-with-html-5\/<\/i><\/a>).<\/p>\n<p>Con el objetivo de expandir las funcionalidades del trabajo con sonido a trav\u00e9s del navegador, el W3C crea el Audio Working Group (<a href=\"http:\/\/www.w3.org\/2011\/audio\/\"><i>http:\/\/www.w3.org\/2011\/audio\/<\/i><\/a>) en marzo del 2011. Este grupo tiene en cuenta el trabajo llevado a cabo por el equipo de Mozilla, que desarroll\u00f3 la Audio Data API (<a href=\"https:\/\/wiki.mozilla.org\/Audio_Data_API\"><i>https:\/\/wiki.mozilla.org\/Audio_Data_API<\/i><\/a>), una especificaci\u00f3n no est\u00e1ndar para su navegador Firefox. Un primer resultado del Audio Working Group ha sido la creaci\u00f3n de la Web Audio API (<a href=\"http:\/\/www.w3.org\/TR\/webaudio\/\"><i>http:\/\/www.w3.org\/TR\/webaudio\/<\/i><\/a>), en desarrollo en la actualidad y disponible en Chrome a partir de la versi\u00f3n 14 y previa activaci\u00f3n del <i>flag<\/i> correspondiente (activar \u00abEntrada de audio web\u00bb introduciendo <i>about:flags<\/i> en la barra de direcciones del navegador Chrome). Esta especificaci\u00f3n permite procesar y sintetizar audio desde el propio navegador.<\/p>\n<h2>Librer\u00edas asociadas<\/h2>\n<p>Hay una librer\u00eda de c\u00f3digo abierto, Audiolet (<a href=\"http:\/\/oampo.github.com\/Audiolet\/\"><i>http:\/\/oampo.github.com\/Audiolet\/<\/i><\/a>), que simplifica el uso de las dos anteriores API de audio, al integrarlas en unas mismas instrucciones y simplificar su uso. Como toda simplificaci\u00f3n, se pierde cierta libertad de creaci\u00f3n, pero se gana en velocidad de desarrollo.<\/p>\n<p>M\u00e1s librer\u00edas pueden encontrarse en la web de Mozilla (<a href=\"https:\/\/wiki.mozilla.org\/Audio_Data_API#JavaScript_Audio_Libraries\"><i>https:\/\/wiki.mozilla.org\/Audio_Data_API#JavaScript_Audio_Libraries<\/i><\/a>), as\u00ed como ejemplos demostrativos (en este caso, ligados a la Audio Data API de Mozilla).<\/p>\n<h2>Est\u00e1ndar no cerrado<\/h2>\n<p>La Web Audio API es una especificaci\u00f3n en borrador. No est\u00e1 terminada y no todos los navegadores la aceptan. De hecho, \u00fanicamente Chrome y Safari la entienden. Mozilla tiene su Audio Data API y Explorer no se pronuncia, por citar algunos navegadores. De este modo, \u00fanicamente las posibilidades b\u00e1sicas definidas por la etiqueta\u00a0<i>audio<\/i> est\u00e1n disponibles de forma generalizada.<\/p>\n<p><span style=\"font-size: 1.5em\">A\u00fan as\u00ed, se desarrolla<\/span><\/p>\n<p>A pesar de no haber un est\u00e1ndar cerrado ni acabado, existen diferentes ejemplos de s\u00edntesis de audio a trav\u00e9s del navegador (Chrome o Safari),\u00a0 <a href=\"http:\/\/chromium.googlecode.com\/svn\/trunk\/samples\/audio\/index.html\"><i>http:\/\/chromium.googlecode.com\/svn\/trunk\/samples\/audio\/index.html<\/i><\/a> o los ejemplos citados en la web de Audiolet <a href=\"http:\/\/oampo.github.com\/Audiolet\/\"><i>http:\/\/oampo.github.com\/Audiolet\/<\/i><\/a>.<\/p>\n<p>Es un desarrollo costoso, ya que un cambio en la especificaci\u00f3n implica cambiar el propio desarrollo para hacerlo compatible con las versiones actualizadas de los navegadores que soportan dicha especificaci\u00f3n.<\/p>\n<h2>Para saber m\u00e1s<\/h2>\n<p>Se puede consultar informaci\u00f3n completa y extensa sobre el estado de definici\u00f3n de la Web Audio API para manejar el sonido en <a href=\"http:\/\/www.w3.org\/TR\/webaudio\/\"><i>http:\/\/www.w3.org\/TR\/webaudio\/<\/i><\/a>.<\/p>\n<p>Un buen art\u00edculo que explica las posibilidades de la Web Audio API puede encontrarse en <a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webaudio\/intro\/?redirect_from_locale=es\"><i>http:\/\/www.html5rocks.com\/en\/tutorials\/webaudio\/intro\/?redirect_from_locale=es<\/i><\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Antes de la aparici\u00f3n de la versi\u00f3n 5 de HTML, si se deseaba incluir audio en una p\u00e1gina web, no quedaban muchas opciones aparte de utilizar la tecnolog\u00eda Flash, propietaria de Adobe. Con HTML5 se introducen nuevas etiquetas que anuncian la incorporaci\u00f3n de audio y v\u00eddeo en la web, sin necesidad de ning\u00fan tipo de &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/audio-en-la-web\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abAudio en la web\u00bb<\/span><\/a><\/p>\n","protected":false},"author":34,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[84,88,87,86,85],"class_list":["post-326","post","type-post","status-publish","format-standard","hentry","category-technologies","tag-audio","tag-audio-data-api","tag-html5","tag-web","tag-web-audio-api","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/posts\/326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/comments?post=326"}],"version-history":[{"count":19,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/posts\/326\/revisions"}],"predecessor-version":[{"id":424,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/posts\/326\/revisions\/424"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/media?parent=326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/categories?post=326"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/tags?post=326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}