Cómo utilizar HTML5 para reproducir archivos MP3 en tu sitio web
Cómo utilizar HTML5. Si tienes alguna inquietud recuerda contactarnos a través de nuestras redes sociales, o regístrate y déjanos un comentario en esta página. También puedes participar en el WhatsApp. Si usas Telegram ingresa al siguiente enlace.
Para los que no lo sepan, Internet Explorer 9 y 10, Mozilla Firefox y Google Chrome todos tienen reproductores multimedia en su navegador para reproducir ciertos tipos de archivos multimedia. Al principio sólo admitían formatos no comerciales (como OGG), pero ahora admiten MP3, y supongo que también admiten MP4, pero aún no lo he probado.
¿Los jugadores de HTML5 necesitan descargar algo? No, porque ya forman parte de la propia programación del navegador. No es necesario instalar ningún complemento/extensión.
Índice
Internet Explorer 9 y 10
El reproductor de IE10 es definitivamente el más bonito de todos. Los botones y los números son grandes y fáciles de leer, y el aspecto general es bueno.
IE también obtiene puntos extra por poder ajustar la velocidad haciendo clic con el botón derecho del ratón en el reproductor:
Mozilla Firefox
El reproductor Fx es el más aburrido De los muchos que hay, pero funcionales de todos modos.
Cuando hagas clic con el botón derecho del ratón sobre esto, no haz clic en “Ocultar controles” porque entonces el sonido sigue reproduciéndose y el propio reproductor desaparece, lo que te obliga a recargar la página web para recuperarlo.
Google Chrome
No es tan aburrido como el reproductor Fx 21, ni tan bonito como el reproductor IE10, pero tiene la ventaja de su fácil manejo. Los controles deslizantes relativos a la posición y el volumen del sonido son más fáciles de pulsar, mantener y arrastrar que los de los otros dos reproductores.
¿Cómo puedes utilizar estos reproductores web en tu sitio web?
Al utilizar la etiqueta HTML
Instrucciones completas Aquí, pero aquí tienes una forma general de hacerlo cuando codifiques tu propia página web.
En primer lugar, tu MP3 debe estar descargado, accesible, y debes conocer la dirección completa, por ejemplo, http://www.your.site/audio/your-audio-file.mp3.
En segundo lugar, escribe tu código de la siguiente manera
Lo sentimos, tu navegador no soporta la etiqueta de audio, por favor actualiza tu navegador
Deberías activar la notificación “lo siento, tu navegador no es compatible” para los navegadores móviles y web más antiguos, como IE8.
En tercer lugar, publica tu página web.
Y eso es todo.
Sí, puedes utilizar el código en blogs gratuitos como WordPress.com y también en Blogger.com si quieres.
En un blog de WordPress.com, es fácil porque cuando escribes una nueva entrada en el blog, puedes ir a la pestaña “Texto” e insertar tu código de la siguiente manera
¿Dónde puedes almacenar tus archivos MP3 de podcast?
La forma más fácil es almacenarlos en el propio sitio, pero si no puedes hacerlo, puedes utilizar DropBox o cualquier otro servicio de almacenamiento en la nube si permiten la subida directa.
De todos modos, sí, los reproductores de navegador modernos funcionan bien. Los tres navegadores no tuvieron problemas, ya que cada uno de ellos reprodujo el audio MP3 como estaba previsto.