Morton 10 de octubre de 2010 a las 18.30
   Imprimir artículo
elWebmaster.com

HTML5: Crear un reproductor de música sin usar Flash


html5El innovador HTML5 presenta algunos nuevos tags capaces de derrocar el reino que Flash ejerce en la web desde hace ya varios años. Sin embargo, aún no se ha implementado por completo en todos los navegadores.

Es por eso que hoy aprenderemos a colocar un reproductor de música utilizando el tag audio pero a su vez, veremos cómo usar Flash a modo de respaldo ante cualquier incompatibilidad que se nos pueda presentar.

Para comenzar, veremos que usar el tag audio es bastante sencillo, tan sólo basta con colocar dentro del mismo el tag source que utilizaremos para definir la fuente del archivo de sonido a reproducir. Luego, deberemos cerrar el tag audio. A continuación veremos un ejemplo:

  1. <audio controls>
  2. <source src="song.mp3" type="audio/mp3">
  3. </audio>

Al cargar la página, el navegador construirá a partir de este tag, un reproductor de audio para que el archivo pueda ser reproducido (para ello siempre debe estar colocado el parámetro “controls“, como puede verse en el ejemplo). Dependiendo el navegador, el reproductor se verá distinto.

De existir algún problema con la extensión del archivo, podemos utilizar otras extensiones alternativas. Esto lo logramos colocando múltiples tags source. El navegador intentará utilizar uno por uno los archivos listados hasta hallar alguno cuyo formato sea compatible.

  1. <audio controls>
  2.   <source src="song.mp3" type="audio/mp3" />
  3.   <source src="song.ogg" type="audio/ogg" />
  4. </audio>

Bien, ya hemos utilizado el HTML5 para insertar audio y hemos visto como utilizar varios tipos de archivo, pero… ¿Y ante una incompatibilidad total con la nueva herramienta?

Si el navegador en el que está siendo visto tu sitio no cuenta con la compatibilidad HTML5 suficiente para interpretar el tag audio entonces en su lugar, insertaremos un reproductor funcional creado en Flash. En esta guía utilizaremos WP Audio Player, funcional en cualquier sitio y basado en el exitoso plugin de WordPress. Luego de descargarlo, sigue las instrucciones indicadas en su página de descarga:

Haz clic aquí para descargar WP Audio Player >>

Y ahora, con un poco de Javascript lograremos nuestro cometido:

  1. <audio id="audioplayer" controls>
  2.   <source src="song.mp3" type="audio/mp3" />
  3.   <source src="song.ogg" type="audio/ogg" />
  4. </audio>
  5. <script type="text/javascript">
  6.     var audioTag = document.createElement('audio');
  7.     if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
  8.         AudioPlayer.embed("audioplayer", {soundFile: "song.mp3"});
  9.     }
  10. </script>

Aquí puedes ver que el script comprueba que el navegador haya interpretado satisfactoriamente el tag audio (es decir, que haya podido crear el reproductor y que no presente incompatibilidad con el tipo de archivo utilizado), y en caso contrario, reemplaza el elemento de una determinada ID por el reproductor flash de WP Audio Player.

Para que funcione correctamente, la ID asignada al tag audio debe ser la misma que a la que AudioPlayer.embed se le indica que debe reemplazar, como has podido ver en el ejemplo.

Eso fue todo. ¡Hasta la próxima!

Fuente original del artículo: [ConeyBeare Code]
Traducción realizada por Elwebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (17)

  1. wariodiaz dice:

    Puestanto q odian a Flash.. y no lo quieren en su web.. no lo usen a “modod de respaldo para cualquier incompativilidad” y acepten q su HTML5 no sirve mas q para los exploradores de nueva generacion y olvidencen de todo aquel publico q requiere flash….

  2. Morton dice:

    @Wario Diaz: ¿Quién ha dicho que odiamos Flash? Es una gran herramienta. Sólo celebramos el gran paso que ha dado el HTML5 en cuestión de estándares web.

    Saludos!

  3. Mario dice:

    Hola amigos. Gracias por el aporte, lo pondré a prueba y luego comento. Gracias

  4. Avraxas dice:

    Y tambien sirve para audio en tiempo real, streaming de alguna emisora online ??

  5. Marcelo dice:

    Siempre fue tema de discusión Flash… en particular prefiero usarlo para heads, banners,y no para sitios enteros.

  6. Karloz dice:

    yo creo que en parte es lucha contra flash, puesto que adobe tiene ganancias potencialmente buenas y por otra parte es un paso hacia la actualizacion de los conociemientos, en parte buena y en parte mala, recuerden para ver flash hay que tener instalados programas y para nueva generacion de codigos nesesitamos nuevos y modernos exploradores los cuales tambien utilizan programas.

  7. Sergio dice:

    Realmente es cuestión de gustos, pero siempre de vez en tanto hay que actualizar el navegador como otras cosas de tu ordenador, no siempre estaremos en web 2.0 después será 3.0 e imagínense utilizar para la 3.0 IE 4

  8. Jdust dice:

    jajajajajaja pare ser que a los flasheros se les esta derrubando el terreno esto y css3 les va robar mucha chamba igual aun necesitamos de los diseñadores pero los programadores amaremos esta herramienta.

  9. holaaaaaaaaaaa dice:

    pero , para poner las canciones devemos suplantar los archivos song.mp3 pero ¿como subimos archivos de audio a la web , que este codigo registre?? respondan porfavor

  10. Nestor Montilla dice:

    Hola, excelente tutorial, me ha servido de mucho.

    Pero ahora tengo una duda: Como puedo hacer para que ese reproductor sirva para retransmitir online?

    Saludos y Gracias ;)

  11. Davidz dice:

    Es muy interesant conocer las nuevas etiketas de html5 y la gran ayuda k t da ahora no solo para reproducir mp3 o video sino tambien k en cuestion d imagenes es mas elegant.

  12. Diseñador dice:

    Es justo lo que andaba buscando, gracias por el aporte. Un saludo.

  13. d dice:

    como ponemos musica

  14. Dani dice:

    el mayor problema de flash, como de java en las ultimas versiones son sus fallos en seguridad

  15. Dani dice:

    a demas de que si basas el contenido en flash, olvidate del SEO

  16. humberto dice:

    Primeramente darte, mil gracias por este aporte no te imaginas como he luchado para poder hacer un código que funcione en todos los navegadores y dispositivos móviles para las estaciones de radio que tengo en mi web, este código me ha caído de perla, era lo que necesitaba para implementar en las 237 estaciones de radio que ya comenzare a modificar aprovechando los ajustes que estoy haciendo en toda la página, mil gracias ya agregue esta página a mis favoritos y la tendré como referencia, gracias mi hermano mil gracias me has quitado un gran dolor de cabeza, te mereces una estatua ^_^ porque información hay mucha pero de muy mala calidad y poco funcional y pasas horas y horas buscando algo que sirva y que este explicado adecuadamente.

  17. Veronica dice:

    Hola! En primer lugar gracias por el aporte. Llevo mucho tiempo buscando algo así.
    Pero tengo muchos problemas para hacer que funcione en mi web. Yo subo los audios a dropbox y no sé que código debo copiar. De hecho, he probado con el codigo del reproductor, y el del archivo de mp3, pero nada, No consigo hacerlo funcionar. Mi pregunta es: ¿Es posible alojar un audio a dropbox y hacerlo funcionar?, 2¿Si no funciona dropbox, que pagina debo usar? ¿Es imposible que funcione en WIX?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder