MondoGonzo

Anatomy of a Mashup, de Cameron Adams, es un análisis audiovisual de una remezcla de seis minutos de temas de Daft Punk que él mismo hizo que mencionaban hace unos días en DailyJS. En la entrada de su blog al respecto, Anatomy of a Mashup: Definitive Daft Punk visualised, el señor Adams dice:

[…] By dividing up the sound data for each song and computing its appearance in realtime, the resulting visualisation gives you an understanding of the unique anatomy of this particular mashup.

The entire piece is composed from the latest HTML5 and CSS3 technology (canvas, audio, transforms & transitions) so you’ll need a newer browser to view it in. I recommend Chrome because it pulls off the best performance with my mangled code. All of the waveform and spectrum visualisation is performed in realtime, so your browser is rendering a music video on the fly!

Hopefully it gives you a new insight into the artform of the mashup, otherwise you can just stare at the pretty shapes.

El código fuente de la parte principal parece bastante legible, así que le echaré un vistazo en cuanto tenga un hueco.

Hace unos meses apuntaba una solución basada en JavaScript y Canvas vista en Ajaxian. Últimamente Ajaxian está algo muerto pero en WebAppers me encuentro con VexFlow:

VexFlow is an open-source web-based music notation rendering API. It is written completely in JavaScript, and runs right in the browser. VexFlow supports HTML5 Canvas and SVG.

En la propia página convierten esto:

tabstave notation=true
notes :q (5/2.5/3.7/4) 5h6/3 7/4 |
notes :8 [ t12p7p5h7/4 ] :q 7v/5 :8 [ 3s:16:5-7/5 ]

tabstave notation=true
notes :q (5/4.5/5)s(7/4.7/5)s(5/4.5/5)
notes :8 [ (5/4.5/5)h(7/5) ] |
notes :8 [ t(12/5.12/4)s(5/5.5/4) 3b4/5 ] :h 5V/6


en esto:

Habrá que darle un tiento.

A principios de mes mencionaba The Wilderness Downtown y hace unos días Mr.doob publicaba un artículo en su blog dando algunos detalles de cómo surgió y se llevó a cabo este proyecto de desarrollo. Una lectura más que recomendable para los interesados en la materia.

Hace una temporada que sigo Chrome Experiments con cierto entusiasmo. Si seguís mis elementos compartidos de Google Reader es posible que también lo conozcáis. La propuesta del sitio es bastante sencilla:

[…] we created this site to showcase cool experiments for both JavaScript and web browsers. These experiments were created by designers and programmers from around the world using the latest open standards, including HTML5, Canvas, SVG, and more.

Si todavía no conocéis esta colección de proyectos os recomiendo echarle un ojo, hay algunos que son realmente espectaculares. Ayer, en el blog de Google Chrome, destacaban uno de estos experimentos, The Wilderness Downtown:

Choreographed windows, interactive flocking, custom rendered maps, real-time compositing, procedural drawing, 3D canvas rendering… this Chrome Experiment has them all. “The Wilderness Downtown” is an interactive interpretation of Arcade Fire’s song “We Used To Wait” and was built entirely with the latest open web technologies, including HTML5 video, audio, and canvas.

El resultado es, como poco, muy curioso. Es una lástima que los caminos de diseño y desarrollo que abren las nuevas funcionalidades de los navegadores se vean perjudicados por el uso de otros navegadores totalmente desfasados.

A veces los bugs no son algo malo.

Hace unos días meniconaba los experimentos de Jacob Seidelin apoyados en un trabajo previo de un grupo de programadores que aprovecha un bug presente en una versión de desarrollo de Firefox. Pues bien, a finales de mayo David Humphrey publicaba la décima entrega de los experimentos con el audio desarrollados por dicho grupo de desarrolladores:

Since my last post, quite a few new people have joined our group, a lot has changed in our implementation, and we’ve achieved a few things worth writing about. I also can’t keep these demos under wraps any longer, so it’s time for another post.

Lo vi en Ajaxian, como en las ocasiones anteriores.

Veo en Ajaxian:

Mohit Muthanna has implemented music notion in Canvas. He has the beginnings of it right now, and still needs to tie in a nice DSL to write it out.

La demo que se señala en el blog del autor muestra resultados como este:

A principios de año veía un ejemplo de visualización de sonido con una versión parcheada de Firefox. Hace un mes, Jacob Seidelin revisitaba uno de sus experimentos apoyándose en esta solución:

[…] a few people have been hacking away at Firefox, attempting to provide just that functionality for the audio element. Some documentation of the new API is available here and if you’re interested, you can follow the development in this bugzilla thread.

Anyway, I’ve been wanting to mess around with this and I figured that retro-fitting my “Pocket Full of Canvas” experiment to use HTML5 audio would be a fairly easy task. You can check out the result here.

Los resultados son bastante bonitos, como se puede ver: