AudioSense: HTML5 y la Web Audio API

pavarotti

AudioSense mostrando en tiempo real la frecuencia de Nessun Dorma

Bueno, hace tiempo que he tenido oportunidad de llevar varios cursos en línea, del tipo MOOC (Massive Open Online Course). En un principio excéptico, he encontrado en este tipo de plataformas una nueva y muy poderosa herramienta de auto-aprendizaje.

Hay una plataforma llamada edX (www.edx.org), la cual es una plataforma abierta que ofrece cursos en línea de forma gratuita. EdX fue fundada por Harvard y el MIT por lo que pienso que tienen un respaldo bastante sólido.

De los varios cursos disponibles, hace tiempo probé los cursos de HTML5,

HTML5 Part 1: HTML5 Coding Essentials and Best Practices: https://www.edx.org/course/html5-part-1-html5-coding-essentials-w3cx-html5-1x-0

HTML5 Part 2: Advanced Techniques for Designing HTML5 Apps: https://www.edx.org/course/html5-part-2-advanced-techniques-w3cx-html5-2x-0

Bueno, haré una pausa de la publicidad en este punto, por que ciertamente no busco que esta entrada en el blog sea solo hablar de los cursos, si no más bien quisiera presentarles una pequeña aplicación web que pude realizar gracias a los conocimientos que pude obtener de los mismos (gracias al gran profesor Michel Buffa).

AudioSense y Web Audio Api

Bueno, los que hayan jugado un poco con HTML5 habrán visto que hay una gran cantidad de elementos poderosísimos, como la capacidad de manejar video sin necesidad de flash, manipular audio, geolocalización e incluso la posibilidad de crear juegos gracias al Canvas.

Se me ocurrió entonces, unir algunas de estas propiedades en una sola aplicacion:

AUDIOSENSE DEMO: https://s3-us-west-2.amazonaws.com/richiemx.com/index.html

Al entrar a la aplicación, nos solicitará permiso para acceder a la webcam y al micrófono:

audios1

Si nos damos cuenta en la dirección del navegador, estamos en https, esto es requisito si subimos nuestra aplicación a Internet y queremos que pueda solicitar acceso a la Webcam del usuario (o al micrófono) … creo recordar que sin https, en Chrome o Firefox no se puede hacer esta solicitud.

Pero… ¿Qué hace mi aplicación?…

Bueno, si le damos permiso de utilizar el micrófono… la aplicación estará a la escucha de los sonidos que capture el micrófono y mostrará la frecuencia de la señal de audio en dos paneles canvas de la pantalla. También obtiene la imágen de la webcam pero esto es solo con fin decorativo.

En la parte central, se muestra el valor de la frecuencia en Hz … todo esto para qué?

Bueno, he visto en varias páginas de Internet donde hablan que los sonidos representan colores (Ej. http://www.flutopedia.com/sound_color.htm).

Entonces si tenemos la frecuencia del sonido en tiempo real, podemos mostrar en un canvas que varie el color en base a esta frecuencia … el resultado? … podría ser: el color de los sonidos.

Realmente es una aplicación sencilla, aunque creo que un logro si fue poder calcular la frecuencia en Hz … y el resultado es agradable, por decir, he probado el programa escuchando música de Pavarotti y obtengo unos bello tonos en morado.

Tenía la aplicación arrumbada, lo cual no pienso que tenga caso, asi que por eso la quise compartir, si alguien gusta de tener el código puede obtenerlo directamente, pues no es mas que HTML, CSS y Javascript.

Como nota extra quiero decir que fue mi proyecto final en un MOOC que rennovó totalmente mi gusto por la programación, me refiero al curso CS50 de la Universidad de Harvard y que es dirigido por el grandioso Profesor David Malan: https://www.edx.org/course/introduction-computer-science-harvardx-cs50x

En Audiosense, hay otros dos menús … uno que te lleva a un fractal y otro a una gráfica de una parábola … eran mis experimentos con el Canvas y la graficación … no hablaré en este post al respecto, pero si logro perfeccionar mi fractal, haré un post para platicar un poco.

Dejo todo esto solo como curiosidad, a lo mejor a alguien le resulta interesante …

EOF

Anuncios

Publicado el febrero 28, 2016 en Web y etiquetado en , . Guarda el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: