Cómo utilizar HTML5 para reproducir archivos MP3 en tu sitio web

Cómo utilizar HTML5 para reproducir archivos MP3 en tu sitio web

Dave hace el podcast, yo (Rich) hago el podcast, ambos son completamente diferentes entre sí.

Cómo Saber Si GTA 5 Corre en Mi PC

Dave está transmitiendo a través de un reproductor Flash, como funciona la gran mayoría de los podcasts. Verás el reproductor de Flash y, a continuación, un pequeño enlace de descarga de MP3 para aquellos que quieran descargar el archivo de audio para ponerlo en su teléfono o en una lista de reproducción local en su PC/portátil, etc. Д.

Sin embargo, he decidido dar un paso hacia una tecnología web más moderna y permitir los reproductores de MP3 en un navegador HTML5 sólo para ver lo buenos que son o si funcionan.

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.

En mi podcast más reciente probé el reproductor del navegador y así es como resultó:

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:

Te puede interesar:  ¿Puedo añadir una cuenta de Gmail a mi iPhone?

Muy bueno.

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

Te puede interesar:  ¿Excluye Bumble a tus amigos de Facebook?

¿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.

Sin embargo, de los tres, prefiero IE10 porque tiene un mejor aspecto y mejores funciones.

[youtubomatic_search]

También puede interesarte este contenido relacionado:

Comprar Seguidores y Likes Reales para Instagram, TikTok, Youtube...