{"id":2953,"date":"2010-07-01T02:05:40","date_gmt":"2010-07-01T08:05:40","guid":{"rendered":"http:\/\/www.josuepalma.com\/blog\/?p=2953"},"modified":"2010-07-01T10:30:26","modified_gmt":"2010-07-01T16:30:26","slug":"flash-vs-audio","status":"publish","type":"post","link":"https:\/\/www.josuepalma.com\/blog\/flash-vs-audio\/","title":{"rendered":"Flash vs < audio >"},"content":{"rendered":"<p>Como se podr\u00e1n imaginar este es mi tema preferido, no lo puse antes de video por que <a href=\"http:\/\/www.josuepalma.com\/blog\/?p=2935\">ya qued\u00f3 claro que Flash arrasa con HTML5<\/a> en ese contexto, pero en este, aunque no es tan pol\u00e9mico, creo que hay mas equidad entre ambas tecnologias.<\/p>\n<p>&lt;audio&gt; es una etiqueta muy simple que hace referencia a un archivo el c\u00faal podemos cargar, reproducir, loopear y detener; cuenta ademas con la opci\u00f3n de a\u00f1adir controles para el vol\u00famen y\u00a0mute.<\/p>\n<pre lang=\"javascript\" >\r\n<audio id=\"audio\" src=\"song.ogg\" controls=\"controls\">\r\n<\/audio>\r\n<\/pre>\n<p>Es muy pr\u00e1ctico para cosas simples, pero si lo comparamos con las caracteristicas de audio que tiene Flash, si le a\u00f1adimos el acceso al micr\u00f3fono y agregamos que &lt;audio&gt; no tiene soporte para algunos formatos, obtendremos el mismo resultado que con &lt;video&gt;.<\/p>\n<p>\u00bfEntonces por que digo que hay mas equidad entre Flash vs &lt;audio&gt;?<\/p>\n<p>Actualmente se esta desarrollando <a href=\"https:\/\/wiki.mozilla.org\/Audio_Data_API\">un API para audio<\/a> con caracteristicas similares a las que nos llegaron con Flash player 10,\u00a0 concretamente la generaci\u00f3n de audio.<\/p>\n<pre lang=\"actionscript3\" line=\"1\">\r\n\/\/ Actionscript 3\r\nvar sound:Sound = new Sound();\r\nsound.addEventListener(Event.SAMPLE_DATA, onSampleData);\r\nsound.play();\r\n\r\nvar freq:Number = 440;\r\nvar phase:Number = 0;\r\n\r\nfunction onSampleData(e:SampleDataEvent):void\r\n{\r\n\r\nfor (var c:int=0; c<8000; c++)\r\n{\r\nphase += 100 \/ 44100;\r\nvar waveform:Number = 100 * Math.PI * 2;\r\nsample = Math.sin(waveform);\r\ne.data.writeFloat(sample);\r\ne.data.writeFloat(sample);\r\n\r\n}\r\n<\/pre>\n<pre lang=\"javascript\" line=\"1\">\r\n\/\/HTML5\r\n<audio id=\"a1\" \r\n       src=\"song.ogg\" \r\n       onloadedmetadata=\"loadedMetadata(event);\"\r\n       onaudiowritten=\"audioWritten(event);\"\r\n       controls=\"controls\">\r\n<\/audio>\r\n<script>\r\nvar a1 = document.getElementById('a1'),\r\n    a2 = new Audio(),\r\n    buffer = [];\r\n\r\nfunction loadedMetadata(event) {\r\n  a1.volume = 0;\r\n  a2.mozSetup(event.mozChannels, event.mozSampleRate, 1);\r\n}\r\n\r\nfunction audioWritten(event) {\r\n  var frameBuffer = event.mozFrameBuffer;\r\n  writeAudio(frameBuffer);\r\n}\r\n\r\nfunction writeAudio(audio) {\r\n  buffer = (buffer.length === 0) ? audio : buffer.concat(audio);\r\n\r\n  var written = a2.mozWriteAudio(buffer);  \/\/<<--\r\n\r\n}\r\n<\/script>\r\n<\/pre>\n<p>Gracias a esto ya podemos ver la llegada de algunos sintetizadores y cajas de ritmos en HTMl5:<\/p>\n<p><object width=\"380\" height=\"300\"><param name=\"allowfullscreen\" value=\"true\" \/><param name=\"allowscriptaccess\" value=\"always\" \/><param name=\"movie\" value=\"http:\/\/vimeo.com\/moogaloop.swf?clip_id=11411533&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" \/><embed src=\"http:\/\/vimeo.com\/moogaloop.swf?clip_id=11411533&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" type=\"application\/x-shockwave-flash\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"380\" height=\"300\"><\/embed><\/object><\/p>\n<p><a href=\"http:\/\/vimeo.com\/11411533\">HTML5 and Javascript Synthesizer<\/a> from <a href=\"http:\/\/vimeo.com\/corbanbrook\">Corban Brook<\/a> on <a href=\"http:\/\/vimeo.com\">Vimeo<\/a>.<\/p>\n<p>Y por supuesto, al igual que AS3, HTML5 tambien es capaz de leer audio, lo que nos permitir\u00e1 crear desde visualizaciones hasta efectos de audio a los archivos que carguemos (filtros, compresores, delays, ecualizadores, etc)<\/p>\n<p><object width=\"380\" height=\"300\"><param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/OxoFcyKYwr0&amp;hl=es_ES&amp;fs=1\"><\/param><param name=\"allowFullScreen\" value=\"true\"><\/param><param name=\"allowscriptaccess\" value=\"always\"><\/param><embed src=\"http:\/\/www.youtube.com\/v\/OxoFcyKYwr0&amp;hl=es_ES&amp;fs=1\" type=\"application\/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"380\" height=\"300\"><\/embed><\/object><\/p>\n<p>Creo que todos en alguna ocasi\u00f3n vimos alguna visualizaci\u00f3n de audio creada en Flash, con la llegada de Flash Player 10 pudimos empezar a jugar con sintetisis y ahora despu\u00e9s de algunos a\u00f1os tenemos Digital Workstations directamente en el navegador como Myna, Soundation y por supuesto Audiotool que nos llego con un increible sintetizador creado en AS3:<\/p>\n<p><a href=\"http:\/\/www.audiotool.com\/\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.josuepalma.com\/blog\/wp-content\/uploads\/2010\/03\/audiotool-3.png\" class=\"alignnone\" width=\"380\" height=\"280\" \/><\/a><\/p>\n<p>Creo que en este punto HTMl5 di\u00f3 un paso muy grande, que si bien no ser\u00e1 muy explotado por la mayor\u00eda de las personas que hacen web, si nos traer\u00e1 cosas muy interesantes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Como se podr\u00e1n imaginar este es mi tema preferido, no lo puse antes de video por que ya qued\u00f3 claro que Flash arrasa con HTML5\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,10],"tags":[45,30,103],"class_list":["post-2953","post","type-post","status-publish","format-standard","hentry","category-desarrollo","category-diseno","tag-audio","tag-flash","tag-html5"],"_links":{"self":[{"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/posts\/2953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/comments?post=2953"}],"version-history":[{"count":28,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/posts\/2953\/revisions"}],"predecessor-version":[{"id":2988,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/posts\/2953\/revisions\/2988"}],"wp:attachment":[{"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/media?parent=2953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/categories?post=2953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/tags?post=2953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}