¿Tienes una página web y quieres añadir un archivo de audio para que se reproduzca de fondo? Bien, en la entrada de hoy te enseñaré a poner un reproductor de audio por HTML de una forma muy fácil. ¡Empezamos!
Hoy en día, si estás desarrollando una web bajo WordPress u otro CMS, añadir un reproductor de audio a tu sitio web no entraña casi ninguna dificultad. Pero, ¿y si estás desarrollando una web a medida y quieres añadir el reproductor sin recurrir a plugins externos ni a funcionalidades propias de los CMS? Tan solo deberás seguir los pasos que aquí te indico para lograr tu propósito.
Índice de contenidos
Para añadir audio HTML en tu página web, necesitarás tener algo de conocimientos HTML y sus etiquetas. La etiqueta necesaria para que se reproduzca audio en la web es <audio></audio>. Dentro de la etiqueta de apertura, es decir, de la etiqueta <audio>, irán una serie de atributos que veremos más adelante. En tu código deberías ver algo similar a esto:
<audio src="/music/caronte.mp3" type="audio/mpeg">
</audio>En el ejemplo vemos como dentro de la etiqueta <audio> hemos añadido dos atributos. El primero señala la ruta del recurso a reproducir. Con ello, el navegador web encontrará el fichero, y entonces ya podrá reproducirlo.
El segundo de los atributos indica el tipo de recurso que es en lo referente al tipo de fichero. En el caso del ejemplo, el atributo type está indicando que el fichero es de audio y del tipo mpeg. Veamos que más atributos podemos aplicar.
Cuando añades audio a tu web con lenguaje de programación HTML, podrás marcar el comportamiento del reproductor integrado en el navegador con algunos atributos. Los más usados son los siguientes:
Seguro que habrás notado que, dependiendo del navegador que uses, el reproductor de audio que se muestra en pantalla varía de un navegador a otro. Esto es debido a que el reproductor de audio es parte del propio navegador y no de la web.
Aun así, si tienes conocimientos de programación, podrás crear tu propio reproductor de audio para tu web, prescindiendo así del estilo visual del reproductor del navegador. En otra ocasión te enseñaré como puedes crear un reproductor de audio personalizado en tu web.
Cómo has podido comprobar, añadir un reproductor de audio a tu web es realmente sencillo. Con tan solo un poco de experiencia programando en HTML, lograrás introducirlo en tu web. Sin embargo, si necesitas realizar un trabajo más complicado en el diseño de tu web desde Caronte podemos ayudarte. ¡Contacta con nosotros!
Esperamos que este artículo os haya resultado de interés.
¡Hasta la próxima!
¿Te encuentras atrapado en la resolución de problemas? Desde formular la pregunta adecuada hasta aprovechar… Leer más
Como en todas las áreas del diseño, el color tiene un papel fundamental. Comprenderlo y… Leer más
Ha llegado el momento. Al fin tenemos entre nuestras manos la primera gran actualización de… Leer más
¿No has oído hablar de Zapier todavía? ¿Quizás te han hablado por encima de Zapier… Leer más
Imagina que un usuario que esté ubicado en Inglaterra encuentre tu web en la versión… Leer más
En este artículo no solo te explicaremos algunas formas para conseguir quitar una página de… Leer más
Ver comentarios
Disculpa , si mi archivo de audio se encuentra en la nube como sería el código fuente? O mejor aún podría crear una playlist de mis archivos de audio en este mismo reproductor?
Hola Luis Alberto.
Dentro del atributo src tendrás que agregar las urls de los archivos de audio que quieras que se reproduzcan. La url puede ser de otra web, url local, etc. No importa.
En cuanto a la lista de reproducción, estamos preparando otra publicación donde explicaremos esto. ¡Mantente atento!
¡Un saludo!
¡Hola! Me gustaría introducir varios reproductores de audio dentro de una misma web: también podría usar una lista de reproducción pero en cualquier caso necesito poner varios reproductores o listas.
Si introduzco el código varias veces en la web, solo aparece la primera de las veces. ¿Había algunoa forma de poner varios reproductores/listas?
¡Muchas gracias!
Si señor si puede hacerlo.