El 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:
-
<audio controls>
-
<source src="song.mp3" type="audio/mp3">
-
</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.
-
<audio controls>
-
<source src="song.mp3" type="audio/mp3" />
-
<source src="song.ogg" type="audio/ogg" />
-
</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:
-
<audio id="audioplayer" controls>
-
<source src="song.mp3" type="audio/mp3" />
-
<source src="song.ogg" type="audio/ogg" />
-
</audio>
-
<script type="text/javascript">
-
var audioTag = document.createElement('audio');
-
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
-
AudioPlayer.embed("audioplayer", {soundFile: "song.mp3"});
-
}
-
</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
Domingo, 10 de Octubre de 2010 a las 18.39
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....
Domingo, 10 de Octubre de 2010 a las 18.42
@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!
Miércoles, 13 de Octubre de 2010 a las 12.01
Hola amigos. Gracias por el aporte, lo pondré a prueba y luego comento. Gracias
Miércoles, 13 de Octubre de 2010 a las 14.55
Y tambien sirve para audio en tiempo real, streaming de alguna emisora online ??
Miércoles, 13 de Octubre de 2010 a las 18.31
Siempre fue tema de discusión Flash... en particular prefiero usarlo para heads, banners,y no para sitios enteros.
Viernes, 15 de Octubre de 2010 a las 03.58
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.
Viernes, 3 de Diciembre de 2010 a las 14.30
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
Sábado, 25 de Diciembre de 2010 a las 07.32
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.
Jueves, 27 de Enero de 2011 a las 22.52
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
Jueves, 10 de Febrero de 2011 a las 21.22
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
Martes, 13 de Septiembre de 2011 a las 11.26
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.
Miércoles, 5 de Diciembre de 2012 a las 22.26
Es justo lo que andaba buscando, gracias por el aporte. Un saludo.
Sábado, 22 de Diciembre de 2012 a las 20.34
como ponemos musica
Domingo, 2 de Junio de 2013 a las 10.53
el mayor problema de flash, como de java en las ultimas versiones son sus fallos en seguridad
Domingo, 2 de Junio de 2013 a las 10.55
a demas de que si basas el contenido en flash, olvidate del SEO