Aquí hay algo que podría sorprenderte: muchos usuarios de WordPress que intentan agregar archivos de audio a su sitio terminan alejando a los visitantes en lugar de atraerlos.
El culpable suelen ser los archivos enormes que ralentizan sus sitios, los reproductores de música rotos y el audio que se niega a funcionar en dispositivos móviles.
Hemos visto este patrón muchas veces mientras ayudábamos a los propietarios de sitios web de WordPress a solucionar sus problemas de audio.
Después de una extensa investigación y pruebas, encontramos 3 excelentes opciones para agregar archivos MP3 a WordPress. Son el bloque de audio integrado de WordPress, el reproductor de audio HTML5 y Easy Digital Downloads.
En este artículo, te mostraremos cómo usar estas herramientas para agregar archivos de audio a tu sitio web de WordPress, incluso si eres principiante.
¿Por qué agregar archivos de audio MP3 en WordPress?
Compartir archivos de audio en tu sitio web de WordPress puede ser una excelente manera de mantener a las personas interesadas y animarlas a pasar más tiempo en él.
Si la participación en tu sitio web es alta, los visitantes estarán más propensos a recordar tu marca. También podrían tomar medidas, como realizar una compra o suscribirse a tu boletín de correo electrónico.
Aquí está el truco: Cuando tus visitantes pasan más tiempo explorando tu sitio web, puede ser una señal positiva para los motores de búsqueda.
Como resultado, tu sitio puede tener clasificaciones SEO más altas y obtener más tráfico.
Teniendo esto en cuenta, es una buena idea compartir versiones de audio MP3 de tus publicaciones de blog, episodios de podcast, grabaciones de seminarios web o canciones en tu sitio web. Incluso puedes ofrecer estos archivos de audio a la venta. 🛒
En esta guía, te mostraremos cómo agregar archivos de audio MP3 a un sitio web de WordPress. Si te interesa un método en particular, puedes hacer clic en el enlace para saltar al artículo:
- Método 1. Cómo agregar archivos MP3 usando el bloque de audio integrado (soporta plataformas de streaming)
- Método 2. Cómo agregar archivos de audio MP3 usando un plugin de WordPress (más personalizable)
- Método 3. Cómo agregar archivos MP3 usando Easy Digital Downloads (y ganar dinero)
- Consejo extra: Mejora la interacción con galerías de imágenes y videos 🖼️
Empecemos.
Método 1. Cómo agregar archivos MP3 usando el bloque de audio integrado (soporta plataformas de streaming)
La forma más fácil de incrustar archivos de audio MP3 es usando el bloque de audio integrado de WordPress.
Este sencillo bloque tiene todos los controles de reproducción importantes, incluyendo un botón de reproducir/pausar, controles de volumen y un botón para cambiar la velocidad de reproducción.
Si no necesitas funciones más avanzadas, el bloque 'Audio' es una buena opción. Puedes usar el bloque 'Audio' para reproducir cualquier archivo MP3 de tu biblioteca de medios de WordPress.
⚠️ Importante: Para la mayoría de los usuarios, no recomendamos subir MP3 para reproducirlos en tu sitio de WordPress. Esto se debe a que subir archivos de audio o video grandes puede ocupar mucho espacio y ralentizar tu sitio web.
Puedes aprender más en nuestra guía sobre por qué nunca debes subir videos a WordPress.
Alternativamente, puedes incrustar MP3 de plataformas de audio de terceros populares como Spotify y SoundCloud.
Solo ten en cuenta que algunas plataformas solo te permiten incrustar un clip del audio completo. También podrían animar a la gente a abandonar tu sitio y escuchar el MP3 completo en sus plataformas, como en la siguiente imagen:
Para agregar un archivo de audio MP3 a tu sitio web de WordPress, abre cualquier página o entrada. Luego, haz clic en el ícono de ‘+’.
Entonces aparecerá una ventana emergente.
Escribe ‘Audio’ para encontrar el bloque correcto. Luego, simplemente haz clic en el bloque ‘Audio’ para agregarlo a tu página.
Si deseas cargar un nuevo archivo MP3, deberás hacer clic en ‘Subir’.
Después de eso, siéntete libre de elegir el archivo de audio que deseas cargar desde tu computadora.
Si deseas usar un archivo MP3 existente, haz clic en ‘Biblioteca de medios’. Luego, deberías poder elegir un archivo de audio de la biblioteca de medios de WordPress.
Si deseas incrustar un MP3 de un sitio externo, deberás hacer clic en ‘Insertar desde URL’ en su lugar.
Todo lo que tienes que hacer es pegar la URL donde se encuentra el archivo de audio.
Una vez que hayas hecho eso, es una buena idea hacer clic en el bloque ‘Audio’ para ver las diferentes configuraciones que puedes ajustar.
📝 Nota: La configuración que veas puede variar dependiendo de si estás agregando un MP3 desde la biblioteca de medios o incrustando audio de un sitio de terceros.
Por ejemplo, podrías hacer que el audio se reproduzca automáticamente haciendo clic en el interruptor ‘Reproducción automática’.
Sin embargo, el audio que comienza a reproducirse tan pronto como se carga la página puede ser molesto, especialmente si el visitante tiene el volumen alto. Teniendo esto en cuenta, solo deberías habilitar ‘Reproducción automática’ si mejora la experiencia del visitante de alguna manera.
También podrías reproducir el archivo de audio en un bucle infinito haciendo clic en el interruptor ‘Bucle’.
Esta configuración tiende a funcionar mejor para audio que no distrae demasiado. Por ejemplo, puedes usarlo para una pista instrumental que proporcione ruido de fondo o establezca la atmósfera.
Alternativamente, puedes habilitar el bucle para audio más largo que los visitantes quieran escuchar una y otra vez, como un álbum completo.
Cuando estés satisfecho con cómo está configurada la página o la entrada, puedes publicarla o actualizarla.
Para entonces, deberías ver el MP3 en vivo en tu página web. Esto también significa que los visitantes pueden escuchar el audio gratis usando los botones de control de reproducción del bloque.
Método 2. Cómo agregar archivos de audio MP3 usando un plugin de WordPress (más personalizable)
El bloque incorporado 'Audio' es una forma fácil de agregar audio MP3 a tu sitio web, incluyendo la incrustación de contenido de plataformas de terceros. Sin embargo, es muy limitado, especialmente en lo que respecta a la personalización de la apariencia y el funcionamiento del reproductor de audio.
Si deseas agregar un archivo de audio desde la biblioteca de medios de WordPress, entonces HTML5 Audio Player es mucho más personalizable.
Es uno de los mejores plugins de reproductor de audio para WordPress y soporta varios formatos de audio diferentes, incluyendo MP3. Sin embargo, ten en cuenta que no puedes usar este plugin para incrustar contenido de servicios de transmisión de terceros.
Primero, instalemos y activemos el plugin. Si necesitas ayuda, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.
Tras la activación, necesitarás crear un reproductor de audio y agregar el archivo MP3 a ese reproductor.
Para empezar, puedes dirigirte a Html5 Audio Player » Html5 Audio Player. Desde aquí, simplemente haz clic en el botón 'Add Audio Player'.
Una vez que hayas hecho eso, lo siguiente es escribir un nombre para el reproductor de audio en el campo 'Add title'.
Puedes usar cualquier título que desees, ya que esto es solo para tu referencia.
Después de eso, querrás desplazarte a la sección 'Player Configuration'.
Aquí, puedes hacer clic en el botón 'Add Audio' para abrir la biblioteca de medios de WordPress. Luego, elige el archivo MP3 que deseas usar.
Después de elegir un MP3, estás listo para personalizar el reproductor de audio.
Por defecto, los visitantes solo necesitan hacer clic en el botón ‘Reproducir’ para escuchar el audio. Así es como la mayoría de los visitantes esperan que funcione un reproductor de audio, por lo que normalmente querrás usar esta configuración predeterminada.
Sin embargo, existen opciones para silenciar el audio por defecto, reproducir automáticamente, repetir y más. Puedes configurar estas opciones para que se ajusten a tus necesidades.
Cuando estés satisfecho con la configuración del reproductor de audio, simplemente haz clic en el botón ‘Guardar’.
Para agregar el archivo MP3 y el reproductor de audio a tu sitio, deberás abrir cualquier página o publicación. El siguiente paso es hacer clic en el botón ‘+’.
En la ventana emergente que aparece, escribe ‘Reproductor de Audio HTML5’ para encontrar el bloque correcto.
Después de eso, procede a hacer clic en ‘Reproductor de Audio HTML5 – Insertar’ para agregar el bloque a tu página.
Una vez hecho esto, puedes expandir el menú desplegable ‘Seleccionar un reproductor’ y elegir el reproductor de audio que acabamos de crear.
El editor de contenido de WordPress no muestra el archivo de audio, por lo que no podrás reproducir el MP3 ni ver el reproductor.
Si quieres ver el reproductor en acción, simplemente haz clic en el enlace 'Vista previa'.
Cuando estés listo para publicar el MP3, actualiza o publica la página. Luego, puedes visitar la página en vivo en tu sitio web de WordPress, y el archivo MP3 debería poder reproducirse.
Método 3. Cómo agregar archivos MP3 usando Easy Digital Downloads (y ganar dinero)
Tanto el bloque de audio integrado de WordPress como el reproductor de audio HTML5 permiten a los visitantes reproducir tus archivos MP3 de forma gratuita. Sin embargo, puedes considerar vender archivos de audio y ganar dinero en línea blogueando con WordPress.
Por defecto, WordPress no tiene ninguna función de comercio electrónico. Por lo tanto, necesitarás usar un plugin si quieres vender tus archivos MP3.
Ahí es donde entra Easy Digital Downloads. Es uno de los mejores plugins de comercio electrónico para WordPress que te permite vender fácilmente libros electrónicos, archivos PDF, videos, archivos de audio MP3 y cualquier otro tipo de producto digital.
Muchos de nuestros sitios asociados utilizan Easy Digital Downloads para vender sus plugins y software, y han reportado excelentes experiencias con él. Para más detalles sobre nuestra experiencia, puedes consultar nuestra detallada reseña de Easy Digital Downloads.
Aún mejor, Easy Digital Downloads viene preinstalado si usas SiteGround como tu proveedor de hosting. Esto te permite empezar a vender MP3s y otros productos digitales de inmediato.
Para más información sobre cómo empezar con Easy Digital Downloads, por favor consulta nuestra guía para principiantes sobre cómo vender descargas digitales en WordPress.
Una vez que tengas Easy Digital Downloads configurado, puedes agregar cada MP3 como un nuevo producto simplemente haciendo clic en 'Descargas' en el menú de la izquierda.
Luego puedes proceder y hacer clic en el botón 'Añadir nuevo'.
Esto abrirá una pantalla donde puedes crear una página de producto para la descarga digital.
Aquí, es una buena idea agregar toda la información necesaria sobre tu archivo de audio, incluyendo su precio, descripción y cualquier categoría y etiqueta de producto que quieras usar.
Una vez que hayas hecho eso, desplázate hasta la sección 'Archivos de descarga' y haz clic en el icono que parece un enlace.
Esto iniciará la biblioteca de medios de WordPress, donde puedes elegir el MP3 que quieres vender en tu sitio.
Cuando estés satisfecho con cómo está configurada la página del producto, simplemente haz clic en 'Publicar'.
Ahora la gente podrá comprar tu archivo de audio MP3 simplemente visitando tu sitio.
Para más información sobre este tema, puedes ver nuestra guía sobre cómo vender música en línea en WordPress.
Consejo extra: Mejora la interacción con galerías de imágenes y videos 🖼️
¿Quieres hacer tu sitio web más interactivo y visualmente atractivo? Prueba a combinar tu reproductor de audio con galerías de imágenes o videos que den vida a tu contenido.
Agregar una sola imagen en WordPress es fácil usando el bloque de Imagen. Pero cuando trabajas con varias imágenes, simplemente apilarlas no es lo ideal. Llena la página y obliga a los usuarios a desplazarse sin fin.
En su lugar, puedes crear una galería para mostrar tus imágenes en un diseño estilo cuadrícula limpio. Los visitantes pueden ver miniaturas y hacer clic para ver versiones de tamaño completo sin salir de la página.
WordPress facilita la creación de galerías usando el bloque de Galería integrado en el editor de Gutenberg. Y si deseas funciones más avanzadas, como efectos de lightbox, álbumes o filtrado, plugins como Envira Gallery ofrecen potentes mejoras.
Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo crear una galería de imágenes en WordPress.
Pero no te detengas en las fotos. Los videos pueden llevar tu contenido aún más lejos.
Un carrusel de videos es una excelente manera de mostrar videos musicales, tomas detrás de cámaras, saludos de fans o avances de álbumes. También es genial para artistas independientes que destacan diferentes canciones con breves introducciones y visuales en video.
Con un plugin como Soliloquy, puedes crear carruseles de videos responsivos en solo unos clics, sin necesidad de codificación. Aprende cómo en nuestra guía sobre cómo crear un carrusel de videos en WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo agregar archivos de audio MP3 en WordPress. A continuación, es posible que desees consultar nuestras guías sobre cómo agregar un reproductor de música de audio en WordPress y cómo vender audiolibros en línea.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Ron en Dallas
Estoy usando el reproductor de música predeterminado y parece funcionar bien. Pero si un usuario hace clic accidentalmente en más de un archivo de audio, rápidamente se vuelve confuso. Me preocupa que no sepan cómo detener un archivo de audio mientras dejan que continúe el que quieren escuchar.
¿Es posible cambiar la configuración dentro de una página, de modo que solo se reproduzca un archivo de audio a la vez?
Soporte de WPBeginner
Para tener una lista de reproducción donde solo se pueda reproducir una a la vez, deberías buscar el plugin del reproductor de este artículo y eso te permitiría limitarlo a un archivo de audio a la vez.
Administrador
Jiří Vaněk
El editor de bloques a veces puede ser muy complicado, al menos para mí, porque estoy acostumbrado a Seed Prod o Elementor. Estoy acostumbrado a crear pistas de audio para artículos importantes usando IA para usuarios con discapacidad visual. Es algo genial. Gracias por la guía sobre Gutenberg, en la que normalmente me pierdo ya que no la uso. Me ahorró espacio adicional para un plugin externo que probablemente habría usado.
christopher baxley
Gracias por la ayuda. Mi blog tiene 6 meses, estaba teniendo problemas para subir audio a una publicación. Me diste un ejemplo claro y comprensible sobre cómo subirlos. Me has ahorrado muchos dolores de cabeza y frustraciones. Gracias. Que tengas un buen día.
Soporte de WPBeginner
You’re welcome, glad our article could help
Administrador
Glen Donohue
¿Cómo puedo meter el MP3 en blubrry press sin tener que hacerlo yo mismo todo el tiempo? ¿Debería haber una forma de que lea el RSS y lo agregue cada vez que hay un nuevo podcast?
Monique Stam
Esto solo funciona si puedes permitirte WordPress Premium o superior, hasta donde yo sé.
Mike P.
Quizás quieras editar esta publicación. Desde la versión 3.6 (estamos en la 4.X), WP puede admitir la incrustación nativa de audio. El plugin no es necesario.
Michele
¡¡Funcionó genial, gracias!!
Carla
Este plugin es antiguo, pero el más nuevo, PB oEmbed HTML5 Audio – with Cache Support, ¡es increíble! Es ridículamente fácil de usar. Solo asegúrate de eliminar el código extra alrededor del enlace que WordPress crea cuando insertas un archivo MP3 en una publicación o página.
Por cierto, para aquellos que no saben cómo insertar un archivo de audio en una publicación o página, agrégalo como lo harías con una foto, usando el botón de Medios.
Alan Thompson
Hola
Estoy seguro de que la solución anterior funciona muy bien para publicaciones individuales. ¿Alguien tiene alguna idea de cómo integrar un reproductor de música que siga reproduciéndose mientras el usuario navega a otras páginas/publicaciones, como la barra en la parte inferior de la pantalla cuando reproduces una pista en http://www.jamendo.com?
Saludos
Alan
khuram khan
gracias por compartir una gran idea...
roni
Cómo reproducir mp3 automáticamente en un sitio web
Erin Dougherty
Hay un límite de tamaño de archivo multimedia de 10 MB y mi archivo de audio es de 11 MB. ¿Cómo se puede agregar un archivo multimedia de más de 10 MB o cómo puedo reducir el tamaño de mi archivo mp3 para poder subirlo a mi sitio de WordPress?
Duckworth
Try uploading the file from inside a post or reduce the file size with any mp3 editors. There are billions of free tools out there. Neat,huh
kainer
Gente, deshágase de todos los complementos que no admiten su servicio en navegadores como IE, Chrome, Firefox y teléfonos/tabletas móviles. ¿Por qué alguien sigue desarrollando esta basura?
¡No puedes usar complementos que solo sirven al 50% de todos los usuarios de Internet!
... y si ves uno de estos complementos a medio hacer: ¡NO LO PROMUEVAS! Es inútil.
Gracias por el artículo, por cierto....
Personal editorial
Creo que te malinterpretaron sobre la compatibilidad del complemento. Funciona con todos los navegadores y tiene un reproductor Flash de respaldo para MP3.
Para otros formatos de archivo OGG y WAV, no es compatible con IE 8, 9 y Safari. Pero de nuevo, escribimos este artículo para archivos MP3, y este complemento los admite en todos los navegadores. La redacción en la página de detalles del complemento puede ser confusa, pero si miras atentamente, hay un punto y coma allí que separa OGG, WAV – no admitido.
Administrador
Warren Horak
Gracias por esta publicación.
Solo un problema, cuando lo actualizo, ¿el enlace URL aparece en la publicación sin reproductor? ¿Cómo puedo solucionar esto?
Gracias
Warren
Osagie 'OsaGz' Alonge
¿Alguien ha notado que este complemento no funciona en dispositivos móviles? ¿Hay algún reproductor de audio que pueda transmitir música en plataformas móviles?
Tim Hyde
Recientemente descubrí el plugin oEmebed HTML5 Audio, que es realmente simple. ¡Quería una forma de evitar usar SoundCloud y sus tarifas!
Este plugin incrustará el reproductor de audio HTML, con una copia de seguridad en flash para cualquier URL de mp3 que encuentre en tu publicación.
http://wordpress.org/extend/plugins/oembed-html5-audio/
De esta manera puedes almacenar tu audio en cualquier lugar. Una carpeta pública de DropBox funciona bastante bien y no podría ser más simple.
Noumaan Yaqoob
Tim, de hecho, este es el mismo plugin que se discute en el artículo anterior. Sin duda es un gran plugin. La idea de Dropbox público es genial.
Básicamente, puedes subir un archivo de audio mp3 u ogg en la carpeta pública de Dropbox. Obtén el enlace del archivo de Dropbox y simplemente pégalo en las publicaciones.
Greg Davis
No se ha actualizado en un tiempo, pero otra buena opción ha sido el plugin de WordPress "Audio Player": http://wordpress.org/extend/plugins/audio-player/
Liam
¡Gracias por compartir!
Jake
¿Funciona bien en móviles? Me imagino que sería difícil hacer clic en los botones en un iPhone.
Andrew Ledwith
He estado usando Blubrry PowerPress para incrustar audio en varios sitios web de WP. He estado muy satisfecho con su rendimiento y su robusto conjunto de opciones.