Vidtomp3 – Transformar el audio de un video Youtube en un archivo mp3
Seguramente más de uno de ustedes tendrá en sus favoritos más de un enlace hacia algún video en YouTube de algún tema que aun no logran conseguir o que han perdido. Sin duda, han pensado, que agradable seria poder obtener el audio de ese video YouTube y transformarlo en un archivo Mp3 sin complicarnos la vida. Por suerte las aplicaciones online siempre están para ayudarnos. vidtomp3 es una herramienta online sumamente sencilla que nos permitirá obtener el audio de un video YouTube y trasformarlo en un archivo Mp3, listo para descargar a nuestro ordenador. Simplemente deberemos ingresar la ruta (url) de nuestro video, y dejar que todo el trabajo corra por cuenta de vidtomp3. Una vez con nuestro archivo listo, descargar nuestro Mp3 y disfrutar de nuestro audio.
¿Es posible automatizar el ancho de los videos para que se vean lo más grande posibles sin tener que usar jQuery?
Sí. Digamos que es relativamente sencillo aunque para usar estas cosas automáticas, hay que entender que debemos ser "prolijos" ya que los códigos no son adivinos así que los datos siempre deben ser agregados de manera más o menos similar. En este caso, la función tomará aquellos videos que se insertan con un IFRAME; por ejemplo:
Uso YouTube porque lo tengo a mano pero da lo mismo cualquier otro servicio. En cualquier caso, lo único que importa es que tengan definidos su tamaño con height y width que es lo normal.
¿Qué hará el script? Simplemente se fijará en cuál es el ancho del contenedor donde está el video (un post, la sidebar, cualquier parte que podamos identificar), leerá el valor de width del video, calculará la proporción (aspect radio), establecerá la nueva altura en función de eso y cambiará los dos datos de la etiqueta, por los valores correspondientes.
Para hacerlo automático, bastaría que la función se ejecutara al cargarse la página pero ¿existe tal cosa como lo automático y universal? La verdad, no.
Cuanto más automatizamos una tarea, más cuidado tenemos que tener para establecer límites precisos ya que los navegadores no son inteligentes, no tienen sentido común ni ninguna otra característica humana; simplemente hacen lo que nosotros les indicamos que hagan.
Es por ese motivo que nunca puedo responder ciertas preguntas salvo con generalidades (este es el caso); porque son preguntas demasiado específicas: quiero que todo se vea de cierto modo EXCEPTO tal cosa. Esas excepciones son la clave de todo y son infinitas; habrá tantas como ideas existan. El diseño web es más que nada una artesanía, se hace a mano, no existe lo universal, todo depende del contexto, de lo que uno quiera, todo depende de esas excepciones. Si no las hay, es fácil; si las hay, habrá que analizarlas una por una. Si lo hacemos bien, el resultado será aceptable y nos aliviará trabajo en el futuro. Son ... los cimientos de una casa; no se ven, no lucen, pero sostienen el resto.
En este caso, como en muchos otros, siempre hay límites que establecer, datos que debemos tener en cuenta. Incluso con el mismo script de jQuery que es una librería sofisticada, por eso sólo funciona con ciertos servicios, si queremos otros, debemos indicarlo. En el caso de Blogger, el mismo servicio utiliza IFRAMEs a destajo así que esas deben ser evitadas y limitarnos a los videos ¿Cómo hacer esto?
Seguramente, mi respuesta no gustará pero, lo ideal es identificar las etiquetas en cuestión con alguna clase CSS; por ejemplo:
Con algo así ya podemos crear la función porque podremos indicar en cuales etiquetas se ejecutará:
Code
<script type='text/javascript'> //<![CDATA[ window.onload=function(){ // crea una lista con todas las etiquetas IFRAME que haya var listaIFRAME = document.body.getElementsByTagName("iframe"); if(listaIFRAME.length>0) { var h,w,ar,maxw; // lee esa lista una por una for(var i=0; i<listaIFRAME.length; ++i) { // si tiene la clase que definimos, calcula if(listaIFRAME[i].className=="videosfluidos") { w = listaIFRAME[i].width; // el ancho h = listaIFRAME[i].height; // el alto ar = h/w; // la proporción // se lee el alcho del contenedor, sea cual sea maxw = listaIFRAME[i].parentNode.clientWidth; // el nuevo ancho es el del contenedor listaIFRAME[i].width = maxw; // y el nuevo alto es proporcional listaIFRAME[i].height = maxw * ar; } } } } //]]> </script>
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
En este tutorial voy a mostrar como crear una lista de reproducción con Mixpod.
Lo primero será ir a su web y registrarnos pulsando en el botón que dice Sign Up:
Rellena el formulario y pulsa el botón verde de abajo:
Una vez registrados ya podremos crear nuestra primera lista de música. Para ello, pulsamos donde dice Create Playlist:
Escribimos el nombre del artista o título que queramos buscar y pulsamos search para que empiece a buscar. Nos saldrá una lista donde encontraremos principalmente videos, aunque también suele haber audios. Podéis escucharlos para ver si el sonido es bueno o si se corresponde con el tema deseado.
Una vez elegido el tema, si pulsamos en el + se añadirá a nuestra lista y aparecerá justo debajo del reproductor de video que aparece por defecto.
Seguid añadiendo canciones a vuestro antojo.
Una vez tenemos todas las canciones que vayamos a meter, vamos a personalizar nuestro reproductor. Pare ello pulsamos en Customize:
En esta pantalla veremos todos los reproductores que hay. Algunos reproducen video, y otros sólo el sonido. Tened en cuenta el tamaño del reproductor a la hora de escoger uno, pues si es muy ancho, no entraría en vuestra columna lateral y quedaría feo.
Una vez escogido, podréis cambiar el color y estilo pulsando donde dice Colors and Styles y los ajustes de reproducción en Settings:
Por último vamos a guardar nuestra lista pulsando en el botón Save Playlist. Aquí lo único obligatorio es el título que queremos darle a esta lista. Una vez puesto el nombre, pulsamos el botón verde de abajo que dice Save (get code) y aparecerá la pantalla con los códigos para varios sitios:
En nuestro caso, elegiremos la pestaña necesaria y nos mostrará el código que necesitamos poner en nuestro sitio.
Con sólo pinchar una vez dentro del recuadro del código, se seleccionará todo. Lo copiamos (botón derecho del ratón > copiar) y nos vamos al panel de diseño de nuestro sitio.
Una vez en el panel de diseño, añadiremos un nuevo gadget HTML/JAVASCRIPT y pegamos allí el código.
Guardamos el gadget, y listo, ya tenemos música en nuestro sitio.
Nota: Por defecto, si no cambiáis nada en los ajustes de la lista, el reproductor empezará sólo, pudiéndose escuchar la música automáticamente. Si preferís que no comience la música de forma automática, y que sean vuestros visitantes quienes decidan si ponerla o no, tendréis que poner "No" en el autoplay de los ajustes de la lista de reproducción:
O bien, en el código de nuestro gadget cambiar donde dice True y poner False :
Todos sabiamos la forma de usar Yahoo Media Player que no era otra cosa que un reproductor de audio con características interesantes ya que bastaba agregar un script y usar enlaces comunes y corrientes a los archivos de audio para que este los detectara.
Aúnque el viejo modelo sigue funcionando perfectamente, durante este año, Yahoo nos permite utilizar un nuevo reproductor llamado Yahoo! WebPlayer que amplia las posibilidades del anterior ya que ahora incluye la posibilidad de reproducir videos de servicios como YouTube.
Agregarlo a un sitio web es sencillo, basta copiar y pegar el script en la plantilla y ellos recomiendan que se haga justo al final, justo antes de
Eso es todo, ahora podemos usarlo en cualquier parte ya que, de modo automático, detectará los enlaces donde haya contenido multimedia así que si se pone esto:
Code
<a href="URL_archivo.mp3">un archivo MP3</a>
veremos el enlace con un botón de ejecución y pausa a su izquierda y además, una pestaña que se adosará a nuestra página y que, al desplegarse, nos permite seleccionar entre todos los archivos reconocidos ya que el script genera una lista de reproducción con todos ellos.
Lo mismo ocurrirá con un video de YouTube o de Yahoo:
Code
<a href="http://www.youtube.com/watch?v=uGcDed4xVD4">Earth 100 million years from now</a> <a href="http://movies.yahoo.com/movie/1810190842/info">Ip Man 2</a>
Agregando parámetros, podemos configurar detalles que cambien los valores por defecto:
autoplay:true reproduce el archivo al cargarse la página autoadvance:false no reproduce el siguiente archivo de modo automático displaystate:1 muestra la pestaña desplegada volume:valor entre 0.0 y 1.0 establece el volumen inicial que por defecto es 0.5 defaultalbumart:'URL_imagen' muestra una miniatura personalizada del video recomiendan imágenes de 205x205 pixeles)
Todas ellas se agregan del msimo modo que el tema; por ejemplo:
Otras opciones pueden ser añadidas directamente como atributos en la etiqueta del enlace:
type="audio/mpeg" define el tipo de archivo multimedia tabindex="2 establece el orden en que se verán en la lista de reproducción title="el título de algo" muestra un título personal
Si tenemos varios archivos en la página, podemos hacer que en la lista de reproducción se sólo se muestren alguno de ellos agregándoles class="htrack"
Code
<a href="URL_1" class="htrack">esta se verá</a> <a href="URL_2">esta NO se verá</a> <a href="URL_3" class="htrack">esta se verá</a>
Agregando class="noplay" evitamos que ese enlace se agregue a la lista de reproducción:
Code
<a href="URL_4" class="noplay">esta NO se verá</a>
Si queremos que cierto enlace se muestre con una miniatura especial, agregamos una etiqueta IMG y la ocultamos:
Audacity es un programa muy potente y se especializa en la edición de audio, tiene infinidad de efectos de sonido, pueden exportar sus archivos a formatos wav y mp3 y muchas otras cosas más, además es open source, gratuito y multiplataforma, disponible para Windows, Linux y Mac.
Casi a la mayoría de nosotros nos gusta la música y quién no tiene una gran colección de canciones en sus computadoras, teléfonos celulares u otros dispositivos? En este post aprenderán a mezclar sus canciones favoritas o hacer sus propias mezclas.
Es muy sencillo hacerlo y aquí se los explico con gráficos paso a paso.
Plugins y bibliotecas para Audacity
Lo primero que deben hacer si no tienen el programa, es bajarlo desde su página oficial. Pero es muy importante que después de bajar Audacity instalen los siguientes plug-ins o complementos y algunas bibliotecas que necesita este programa para funcionar al 100%:
Importar las canciones a mezclar Ya que tienen todo preparado, lo que deben de hacer es abrir el programa e irse al menú que dice: ->Archivo<- y seleccionan la opción ->Abrir<- y eligen el archivo de la primer canción en mp3 con la cual quieren hacer la mezcla. Aquí los gráficos.
Se esperan al proceso de la importación de su audio o canción que seleccionaron como la primera para el proyecto.
Luego se van a menú que dice Proyecto y seleccionan la opción que dice Importar audio y eligen la segunda canción con la cual quieren hacer su mezcla para este proyecto.
Aquí tienen el resultado de las dos canciones importadas hasta el momento:
Luego activan la opción que dice Herramienta de Traslado en Tiempo como se muestra a continuación. Esta herramienta les permite arrastrar al punto donde quieren que quede la mezcla, yo hice una prueba para que se den una idea pero ustedes deben de probar hasta que les quede como desean.
Y en esta imagen verán que la segunda canción ya se encuentra en otra posición y es precisamente lo que ustedes deben de hacer antes de mezclar. Aquí el gráfico.
Mezclar las canciones Ahora que tienen todo preparado para mezclar, se van al menú Editar → Seleccionar →Todo como se muestra en el siguiente gráfico.
Y ahora que tienen seleccionado todo, se van al menú que dice Proyecto y seleccionan la opción que dice Mezcla rápida para que se genere el proceso de unir a las dos canciones de una forma simultánea y esperan a que termine.
Exportar mezcla a Mp3 Ya que tienen las dos canciones mezcladas tienen la opción de escuchar el resultado de la mezcla con los botones del reproductor que se encuentran en la parte de arriba. No dejen de probar hasta que quede como lo desean. Ya saben que pueden revertir los cambios con solo oprimir Control+z al mismo tiempo o se van a Editar → Deshacer cambios.
Y cuando ya terminen con su proyecto solo se van a Archivo y seleccionan la opción que dice Exportar como MP3 así como se muestra en los gráficos.
Audacity es un programa muy completo y tiene infinidad de opciones así como efectos para sus creaciones. Yo les recomiendo que trasteen con él y prueben todo lo que puedan y verán que al final se sorprenderán de todo lo que pueden hacer con este programa.
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Cada día aparecen nuevos recursos en HTML5, esta vez codebasehero.com nos presenta un reproductor de música para insertar directamente en webs / blogs realizado en HTML5 y jQuery. Para ver y comprender su funcionamiento puedes probar su demostración online desde HTML5 jQuery Music Player.
La principal ventaja para cambiar tu reproductor Adobe Flash por este (o cualquier otro) en HTML5, son los estándares, ya que HTML5 jQuery Music Playerb funciona en cualquier navegador actual (incluyendo navegadores de teléfonos móviles, smarthphone) sin necesidad de instalar añadidos como el programa Adobe Flash Player. La agilidad para reproducir las canciones, los controles de reproducción y el bajo consumo de CPU respecto a reproductores Flash hacen de la tecnología HTML5 el principal sustituto de los antiguos reproductores de música insertados en webs.
Respecto al funcionamiento de HTML5 jQuery Music Player podemos decir que cuenta con varias opciones de configuración interesantes como: poder crear una lista completa de canciones, con todos los datos relacionados como: título de la canción, artista, descripción, puntuación, precio, ruta de compra, duración y cover del álbum.
Instalar reproductor de música en HTML5 en nuestro site: 1. Subir a nuestro FTP todos los archivos. 2. Incluir los archivos: jQuery, jPlayer y plugin javascript, css en nuestra página. 3. Construir nuestra playlist de canciones con el siguiente formato:
{ currencySymbol:’$', buyText:’BUY’, tracksToShow:5, autoPlay:false, ratingCallback:function(index, playlistItem, rating){ //some logic to process the rating, perhaps through an ajax call }, jPlayer:{} //override default jPlayer options here. This accepts the same structure as the standalone jPlayer };
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Aprovecha toda la potencia de la etiqueta AUDIO de HTML5
El elemento AUDIO de HTML5 hace posible que los desarrolladores web puedan incorporar audio a sus aplicaciones
La flexibilidad del control y la integración con el resto de la plataforma abre nuevos escenarios, desde simples efectos de sonido a audio de fondo que añada presencia a las experiencias de juego, o incluso reproductores de audio de alto nivel de sofisticación.
En este artículo vamos a echar un vistazo a algunas de las buenas prácticas que deben seguirse para utilizar la etiqueta <audio> en las aplicaciones web, y también voy a dar una serie de consejos útiles y enseñanzas aprendidas de sitios web del mundo real.
Añadir audio a una página web El primer paso, antes de nada, es añadir el elemento audio a la página. Esto lo podemos hacer simplemente declarando la etiqueta <audio> en el código HTML, instanciando un nuevo elemento de audio en el código de Javascript, o bien embebiendo el propio stream de audio dentro de la página:
La primera opción nos permite inicializar los componentes de audio durante la carga de la página. La segunda es más flexible y facilita la gestión del flujo de red, puesto que difiere la carga del archivo de audio a un momento concreto durante el ciclo de vida de la aplicación. La tercera alternativa (menos recomendable) consiste en embeber los propios archivos de audio como direcciones en formato de datos-uri en la propia página, lo que reduce el número de peticiones al servidor.
Podemos comprobar que el elemento de audio generado por Javascript se puede reproducir aunque no se haya añadido aún al árbol del DOM (como sucede en módulo de código anterior). No obstante, al añadir el elemento de audio a la página nos va a permitir mostrar la barra de control por defecto:
Aunque no hablaré de eso en este post, podemos utilizar más de un formato de archivo de audio. Además, si los archivos de audio los tenemos alojados en nuestro servidor, tenemos que acordarnos de registrar el tipo MIME para los archivos MP3 (audio/mpeg) en el propio servidor. Aquí, por ejemplo, se puede ver la configuración Internet Information Services (IIS).
Precarga del audio antes de reproducir Una vez tenemos el elemento audio, podemos decidir qué estrategia de precarga es la mejor. La especificación <audio> de HTML5 describe la propiedad preload con tres valores posibles:
• none: indica al agente de usuario que o bien el autor no espera que el usuario necesite el archivo de audio o que el servidor quiere reducir al mínimo todo tráfico innecesario. En casos como un blog tipo podcast con un archivo de audio en cada artículo, esta opción funciona bastante bien, puesto que reduce el ancho de banda consumido durante la precarga. Cuando el usuario reproduce el archivo (ya sea mediante los controles visuales por defecto o activando los métodos load() o play() de Javascript), el navegador procederá a descargar el stream de audio.
• metadata: informa al agente de usuario que el autor no espera que el usuario necesite el archivo de audio, pero que es adecuado conocer sus metadatos (dimensiones, duración, etc.) Se recomienda esta opción si estamos diseñando un control de reproductor de audio y necesitamos información básica sobre la pista de audio a reproducir pero no tenemos que reproducirla en ese momento.
• auto: indica al agente de usuario de que puede anteponer las necesidades del usuario sin comprometer al servidor, hasta –e incluyendo- una descarga optimista del recurso completo. En otras palabras: si se puede, se descarga por adelantado. Si estamos creando un juego, esta estrategia es seguramente la mejor, ya que nos permite tener precargados los archivos de audio antes de que empiece el juego realmente.
También hay que señalar que cuando se informa la propiedad src del elemento de audio por programa, el navegador por su cuenta establecerá la propiedad preload – salvo que se indique otra cosa - como auto. Por eso, si en tu caso necesitas un valor distinto, asegúrate de que lo especificas añadiendo una línea a tu código antes de definir el valor de src
El impacto sobre la red de estas tres opciones se puede predecir ejecutando esta página y utilizando las Herramientas de Desarrollo F12 (pestaña Network). Para fines de depuración, podemos simular nuevas llamadas y desactivar la cache local marcando la opción del menú Always refresh from sever.
preload=none:
preload=metadata:
preload=auto:
Aunque esta propiedad es sumamente útil en la fase de inicialización, puede que necesitemos saber también en qué momento el navegador ha terminado de descargar el archivo de audio y ya podemos reproducirlo. Esto lo podemos saber escuchando el evento canplaythrough; a este evento lo llama el Agente de Usuario una vez que considera que si en ese momento se empezara a reproducir el archivo, el sonido podría empezar a escucharse a la tasa de reproducción prevista hasta su finalización, sin tener que detenerse para volver a cargar el buffer.
Code
var audio = document.createElement("audio"); audio.src = "audio/sample.mp3"; audio.addEventListener("canplaythrough", function () { alert('The file is loaded and ready to play!'); }, false);
Bucles Otra petición muy frecuente en desarrollos con audio es la posibilidad de reproducción infinita (o "en bucle") de la pista de audio. Con la etiqueta <audio> de HTML5 podemos utilizar la propiedad loop para eso: este parámetro nos permite reproducir de forma continua el archivo, o hasta que el usuario o la aplicación activan el control pause().
Otra forma de reproducir en bucle los archivos de audio consiste en llamar desde programa al método play() cuando finaliza la pista de sonido; de esta manera podemos también controlar el tiempo de retardo entre una reproducción y la siguiente.
Code
var audio = document.createElement("audio"); audio.src = "piano/3C.mp3"; audio.addEventListener('ended', function () { // Wait 500 milliseconds before next loop setTimeout(function () { audio.play(); }, 500); }, false); audio.play();
Interesa saber que cualquier llamada play() que se ejecute sobre el elemento de audio antes de llegar al final de la pista no tiene efecto alguno. Si tienes interés en "cancelar y recuperar" la reproducción de audio en un punto concreto, necesitarás resetear el valor de currentTime.
Code
var audio = null; audio = document.createElement("audio"); audio.src = "piano/3C.mp3"; audio.addEventListener('ended', function () { audio.play(); }, false); function play() { audio.play(); } function restart() { audio.currentTime = 0; audio.play(); }
Múltiples etiquetas de audio Si en tu aplicación necesitas reproducir varias veces el mismo archivo de audio de forma simultánea (o sea, en forma de sonidos superpuestos), lo puedes conseguir insertando varias etiquetas de audio que apunten al mismo archivo. Lógicamente, esta misma solución funciona también para reproducir al mismo tiempo varios archivos distintos. Como he comentado antes, puedes añadirlos por programa o instanciarlos dentro del código HTML.
Este ejemplo de código nos muestra cómo se cargan y reproducen múltiples archivos de audio desde el código HTML. Los archivos de ejemplo tienen todos la misma duración. Al final de la reproducción vuelven a reproducirse desde el inicio. Si se ejecuta este código en Internet Explorer 9, podremos ver que se sincronizan de manera automática durante cada una de las vueltas del bucle. También podrás comprobar que la combinación de estos cinco sonidos devuelve un sonido final que se parece mucho al archivo de audio utilizado en la demostración anterior (sample.mp3).
Aunque la solución es muy sencilla y funciona bien, en la mayoría de casos los desarrolladores prefieren crear sus clips de audio por programación. En el ejemplo de código siguiente se muestra cómo se añaden dinámicamente tres archivos de audio por programa. Si se reproducen a la vez, nos devuelven el acorde MI Mayor al piano.
Code
AddNote("3C"); AddNote("3E"); AddNote("3G"); function AddNote(name) { var audio = document.createElement("audio"); audio.src = "piano/" + name + ".mp3"; audio.autoplay = true; }
Este modelo de código funciona en cualquier navegador y nos permite diseñar escenarios de audio muy atractivos.
Es muy importante tener en cuenta que a medida que una aplicación o juego se hacen más complicados, podríamos encontrarnos con dos límites en un momento dado: el número de elementos de audio que se pueden precargar desde la misma página y el número de elementos de audio que el sistema es capaz de reproducir de forma simultánea.
Estos límites dependen del navegador y de la capacidad del propio equipo. Basándome en mi experiencia personal, Internet Explorer 9 puede manejar decenas de elementos de audio a la vez sin problemas. Otros navegadores no llegan a tanto, y podemos encontrar ejemplos evidentes de retardos y distorsiones cuando se reproducen varios archivos en bucle.
Estrategias de sincronización Dependiendo de las características de la red, debemos siempre tener mucho cuidado con la latencia o retardo que se aprecia entre el momento en que se añade la etiqueta y el momento en que se recupera el contenido de audio del servidor y queda listo para su reproducción. En concreto, si se trata de manejar varios archivos a la vez, todos ellos deberían estar listos para la reproducción antes o después. Aquí, por ejemplo, vemos una captura con los tres archivos utilizados antes, cargándolos desde la propia máquina (localhost).
Como podemos ver en la columna Timings, cada archivo puede que esté disponible en un momento distinto.
Una estrategia de sincronización muy utilizada consiste en precargar todos los archivos. Una vez que todos ellos están disponibles, se meten rápidamente en un bucle para empezar a escucharlos.
Code
var audios = []; var loading = 0; AddNote("2C"); AddNote("2E"); AddNote("2G"); AddNote("3C"); AddNote("3E"); AddNote("3G"); AddNote("4C"); function AddNote(name) { loading++; var audio = document.createElement("audio"); audio.loop = true; audio.addEventListener("canplaythrough", function () { loading--; if (loading == 0) // All files are preloaded StartPlayingAll(); }, false); audio.src = "piano/" + name + ".mp3"; audios.push(audio); } function StartPlayingAll() { for (var i = 0; i < audios.length; i++) audios[i].play(); }
Vamos ahora a juntarlo todo. En la demo siguiente vamos a simular un concierto de piano Frère Jacques (también llamado Hermano Juan, Brother John …o Fra Martino). La página empieza cargando todas las notas y muestra el progreso a medida que se van precargando en el cliente. Cuando ya tenemos todas, la canción empieza y se mantiene en un bucle de reproducción
Audio en sitios web reales Ahora que ya hemos podido ver los principios básicos del manejo de múltiples archivos de audio, quisiera recomendar unos cuantos sitios Web como ejemplo de la aplicación de estas buenas prácticas con la etiqueta <audio>.
Pirates Love Daises: www.pirateslovedaisies.com En otro artículo del blog hablaba de Pirates Love Daises, un excelente juego escrito en HTML5 por Grant Skinner. Además de su calidad como juego y sus atractivos efectos visuales, el equipo de Gran ha desarrollado también una sofisticada biblioteca de audio que reproduce algunos temas a lo largo del desarrollo del juego. La lógica principal queda encapsulada dentro de la clase AudioManager. Como proponía en uno de los apartados, antes de empezar a jugar el sitio precarga todos los archivos de audio y va mostrando el progreso en la página inicial de carga. El sitio web tiene también en cuenta los timeouts y errores de la red al descargar un archivo.
Grant está trabajando en estos momentos en un proyecto de Biblioteca de Sonidos que permitirá a los desarrolladores utilizar su propia lógica para el reproductor de audio con cualquier otra aplicación. ¡Esperemos verlo pronto!
Firework (de Mike Tompkins): www.beautyoftheweb.com/firework La demo Firework es especialmente interesante ya que nos permite interactuar con algunas pistas de audio a la vez, dinámicamente, cambiando el volumen de cada una de ellas. Todavía va más lejos, ya que podemos interactuar también con cada canal de audio, la interfaz reacciona dinámicamente a distintas entradas o configuraciones.
Esta vez las etiquetas de audio se declaran dentro del código HTML (son 6 pistas). El progreso se controla por programa, escuchando el evento canplaythrough. Cuando todos los archivos de audio están disponibles se ejecuta un bucle que va recorriendo la lista y los reproduce.
Code
video.addEventListener('canplaythrough', onCanPlayAudio, false); for (var i = 0; i < 5; i++) { var aud = document.getElementById("aud" + i); targetVolumes.push(0); aud.volume = 0; audioTags.push({ "tag": aud, "ready": false }); aud.addEventListener('canplaythrough', onCanPlayAudio, false); } // Set audio/video tracks document.getElementById("tompkins").src = MediaHelper.GetVideoUrl("Firework_3"); for (var i = 0; i < audioTracks.length; i++) { document.getElementById("aud" + i).src = MediaHelper.GetAudioUrl(audioTracks[i]); }
En este caso los desarrolladores han optado por empezar con el volumen fijado a cero y aumentarlo dinámicamente a 1 en cuanto puede empezar la reproducción. Dependiendo de la calidad de tu tarjeta de audio y los drivers, este truco reduce la probabilidad de escuchar un ruido toc al principio, cuando empieza a oírse el sonido.
BeatKeep: www.beatkeep.net El último ejemplo que os muestro es posiblemente el más complicado de todos. En este caso podemos crear nuestras propias canciones utilizando un generador de pulsos y reproduciendo varias pistas de audio en bucle. En esta aplicación lo esencial es llegar a tener una sincronización perfecta de los canales de audio, y un sistema ágil de buffering cargar varios archivos.
El generador de pulsos nos aporta un control total sobre el tempo y la firma de tiempo. Con la ayuda de una sofisticada lógica de timers y un modelo de acoplamiento, el resultado final es una experiencia realmente agradable.
Conclusiones Te recomiendo que pruebes todos estos ejemplos y aplicaciones que propongo en el artículo utilizando Internet Explorer 9 u otros navegadores y que nos contéis cómo ha sido la experiencia. Puedes descargar todo el código de ejemplo utilizado en el artículo desde aquí.
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Cómo trabajar con archivos MP3 para incorporarlos como sonido en una página web con la etiqueta AUDIO de HTML5 y otras posibilidades para compatibilidad con diversos navegadores
Estamos presentando la utilización de la etiqueta AUDIO. El sonido ya estaba presente en sitios web antes de HTML5, pero para incorporarlo a las páginas nos veíamos obligados a utilizar etiquetas no estándar o plug-ins. Hoy, la manera de incrustar sonido en una página web y que sea compatible con todos los navegadores tiene diversas consideraciones que estudiaremos a continuación.
En este artículo repasaremos las diversas posibilidades de reproducir un archivo de sonido MP3 en un documento HTML 5. Para ello acudiremos, fundamentalmente, a tres estrategias:
• Utilizar las nuevas etiquetas HTML5 • Incrustar el archivo mediante etiquetas HTML, reconocidas en HTML 5 • Usar la etiqueta de referencia general de enlace A HREF
Utilización de la etiqueta audio Esta etiqueta nos permite insertar y ejecutar un archivo de audio en un documento, sin necesitar de conectores externos. Simplemente hemos de pasarle la dirección del archivo multimedia de audio y, lo que será lo habitual, indicar que se muestren los correspondientes controles de ejecución. En el Listado 1 mostramos un ejemplo muy simple de todo esto.
Listado 1: Audio MP3 con etiqueta audio de HTML 5.
Puede que nos interese controlar más personalmente la apariencia del modo de reproducción, lo que implicará tener que basarnos en ciertos scripts y un par de elementos button, por ejemplo, en el Listado 2, vemos cómo acudir a las funciones play() y pause(), disponibles en JavaScript para la programación de las etiquetas audio y video de HTML 5.
Listado 2: Audio MP3 con etiqueta audio de HTML 5, pero sin reproductor visible.
Audio incrustado mediante la etiqueta embed Con la nueva etiqueta embed, a diferencia de la anteriormente comentada, es posible ejecutar aplicaciones externas o contenidos multimedia, haciendo uso de los denominados conectores o plug-ins. Será útil en aquellos casos en los que las etiquetas disponibles en HTML 5 no sean capaces de ejecutar los archivos sin acudir a aquellos (por ejemplo, porque los formatos de archivo sean incompatibles, o porque los documentos no entren, ya de por sí, en las categorías contempladas por el lenguaje HTML 5).
Listado 3: Audio MP3 incrustado con etiqueta embed de HTML 5.
En numerosas ocasiones no es preciso indicar el tipo MIME, dado que es detectado automáticamente, aunque eso penalizará en algo la velocidad de ejecución de las páginas web.
Audio incrustado mediante la etiqueta “object” Con object podremos definir un elemento insertado en un documento HTML; dicho elemento puede ser virtualmente de cualquier tipo, por ejemplo un control ActiveX, un archivo multimedia de vídeo, audio o animación, un applet de Java, un documento Adobe Acrobat, Word, Excel, ...
Esa versatilidad nos vale también para reproducir archivos MP3, de una manera similar a como lo hicimos con la etiqueta embed, pero con una compatibilidad con versiones anteriores del lenguaje HTML. La sintaxis puede ser tan simple como:
Nota: Diferencias entre HTML 4.01 y HTML5 • Algunos atributos HTML 4.01 no son soportados en HTML5. • El atributo form es nuevo en HTML5. • Object puede ser utilizado y enviado en formularios. • Object no puede aparecer en la cabecera (HEAD) de un documento.
Audio referenciado mediante la etiqueta A HREF Finalmente, proponemos otra posibilidad, crear un hiperenlace estándar al archivo multimedia MP3. Se trata, de alguna manera, de la opción menos elegante, pero de una plenamente válida y generalista.
El comportamiento es muy similar a la etiqueta embed, trabaja con la carga del correspondiente control ActiveX que ejecutará el archivo multimedia asociado, en nuestro caso uno MP3. Una diferencia importante es que la carga se realizará en una nueva ventana, en la correspondiente al lugar en que hayamos programado el enlace, como sucede con todas las etiquetas A.
Listado 5: Audio MP3 como un enlace href estándar.
Conveniencia de los diversos métodos En principio dependerá de los navegadores, como causa fundamental. Por ejemplo, hemos de tener muy presente – cómo la primordial - la etiqueta audio y soporte del formato MP3 en los diferentes navegadores, según las últimas versiones que hemos tenido la oportunidad de probar:
De no disponer de dicho soporte, tendremos la alternativa de trabajar con otros formatos de audio, cómo hemos comentado en nuestro artículo acerca de Añadir soporte para múltiples formatos de audio y vídeo (HTML 5).
Si el formato MP3 es la elección única, el uso de embed sería la segunda elección, juntamente con object, si deseamos asegurarnos la compatibilidad con navegadores que no sean compatibles con HTML 5.
Por último A HREF, podría parecer una mera concesión, pero además de asegurar compatibilidad con todas las versiones de HTML y con todos los navegadores, puede que lo que deseemos sea la ejecución en una ventana nueva y en tal caso, éste será el modo más sencillo.
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Dancer.js es una biblioteca JavaScript para la creación de avanzados reproductores de audio, disponible y funcional tanto para el API de audio nativa de Mozilla, como así también para Webkit, siendo necesario para este último utilizar Flash para una correcta ejecución.
Los requerimientos de Dancer.js son mínimos. Por un lado necesitamos un navegador que soporte HTML5, particularmente la etiqueta <audio>, por ejemplo podemos utilizar Chrome o Firefox, ambos perfectamente compatibles. Luego simplemente utilizamos los archivos contenidos en la carpeta lib que viene con la descarga de Dancer. Ahí encontraremos todas las dependencias de esta fantástica biblioteca.
Dentro de las principales características de esta biblioteca JavaScript podemos destacar la representación de datos en tiempo real, por ejemplo podemos visualizar la frecuencia y velocidad en que se reproduce la información en nuestro navegador.
Dancer es muy fácil de personalizar ya que cuenta con varios métodos que nos dan un control sencillo sobre las distintas animaciones, podemos con apenas una llamada tanto iniciar como finalizar las distintas animaciones.
var dancer = new Dancer( "sickjams.ogg" ), beat = dancer.createBeat({ onBeat: function ( mag ) { console.log('Beat!'); }, offBeat: function ( mag ) { console.log('no beat '); } });
beat.on();
dancer.onceAt( 10, function() { // Ejecuta a los 10 seg }).between( 10, 60, function() { // Luego de los 10 seg ejecuta hasta los 60 seg }).after( 60, function() { // Luego de los 60 seg ejecuta una tarea object.y = this.getFrequency( 400 ); }).onceAt( 120, function() { // Pasados los 60 seg finaliza beat.off(); });
dancer.play();
Si bien Dancer.js todavía no esta listo para ser utilizado en servidores de producción, como experimento es muy valido, y su total compatibilidad no es muy lejana, no al menos si tenemos en cuenta el incremento por el cual las personas están actualizando las versiones de su navegador, y la gran cuota de mercado que tienen hoy en día navegadores como Chrome o Firefox, ambos muy comprometidos con los estándares web.
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Tengo una pregunta, he creado el audio y cada vez que entras en la web lo escuchas, lo que no quiero es que cada vez que naveges por las categorias, ejemplo libro de visitas, fotos o cualquier cosa se vuelva a reproducir el audio, quiero que aun siguiendo cambiando de categorias el sonido vaya continuado es decir que no se vuelva a reproducir..
hola amigos. llevo una semana intentando subir música para mi sitio, pero no se me cargan las canciones... me he llegado a tirar hasta un dia entero... y no termina de subir el archivo. alguien sabe qué sucede?? hay algún problema?? qué puedo hacer?? espero respuestas por favor. graciass
Bueno aver, registrate en MixPod ( Creo que 100 canciones maxima te permite de Youtube ) y al terminar de dejar lindo el reproductor se te escucha, pero si queres poner de a una , GURUGUAO dejo el codigo arriba, además a uCoz le tenes que poner un reproductor para cargar las canciones y que se escuchen, como asi con los videos poniendole js, o algun reproductor java ;).
Visita mi sitio si queres ver animes y pelis online www.portal-iw.do.am
