¿Necesita reproducir archivos MP3 en su sitio web? Aquí hay varias formas sencillas de insertar un reproductor MP3 en su sitio web.
Si desea que los visitantes de su sitio web disfruten de un archivo MP3, una de las formas más fáciles de hacerlo es incrustarlo en la página. Con un reproductor MP3 integrado, los visitantes no necesitan descargar directamente el audio ni usar software adicional porque se reproduce en línea.
Vamos a detallar diferentes métodos que puede utilizar para incrustar un MP3 en su sitio web, incluido el uso de HTML5 y Google Drive.
Inserte un MP3 en su sitio web con HTML5
Si se siente cómodo editando el código de su sitio web, una de las formas más sencillas de incrustar un archivo MP3 es utilizar HTML5.
La etiqueta HTML5 <audio> puede parecer básica a primera vista, pero es poderosa ya que es compatible con todos los principales navegadores de escritorio y móviles.
Para incrustar un MP3 con HTML5, use este código:
<audio controls><source src="MP3 URL HERE" type="audio/mpeg">Your browser does not support the audio tag.</audio>
Simplemente reemplace la URL de MP3 AQUÍ con su archivo de audio cargado. Este no puede ser un archivo almacenado en su computadora; debe estar disponible en línea.
Este código colocará un pequeño reproductor de audio en la página, desde el cual el usuario puede reproducir, pausar, desplazar y ajustar el volumen. Así es como se ve en Firefox:
Este código también incluye un mensaje que se mostrará en lugar del reproductor multimedia, en el improbable caso de que el navegador del usuario no sea compatible con el reproductor.
Puede aplicar atributos como reproducción automática y bucle , así:
<audio controls autoplay loop><source src="MP3 URL HERE" type="audio/mpeg">Your browser does not support the audio tag.</audio>
Tenga en cuenta que la mayoría de los navegadores no admiten la reproducción automática porque se considera una mala práctica forzar automáticamente el audio a los usuarios.
La personalización básica se puede aplicar al bloque del reproductor de audio a través de CSS, como el borde y el relleno . Sin embargo, necesitará utilizar JavaScript para diseñar correctamente el propio reproductor de modo que sea coherente en todos los navegadores
Inserte un MP3 en su sitio web con Google Drive
Google Drive es un excelente proveedor de almacenamiento en la nube gratuito . Puede usarlo para cargar su archivo MP3 y crear un reproductor de audio.
Con el MP3 cargado en Google Drive:
Haga clic con el botón derecho en el archivo y haga clic en Obtener enlace .
Cambie la restricción de accesibilidad a Cualquiera con el enlace .
Finalmente, haga clic en Copiar enlace.
Esto le dará una URL similar a esta: https://drive.google.com/file/d/123/view?usp=sharing
Reemplazar vista? Usp = compartir con vista previa , así: https://drive.google.com/file/d/123/preview
Luego, use una etiqueta <iframe> para incrustar el reproductor MP3 en su sitio web, reemplazando la URL de DRIVE con la URL que acaba de editar:
<iframe frameborder="0" width="400" height="150" src="DRIVE URL"></iframe>
Puede ajustar, agregar o eliminar los atributos (como el borde del marco y el ancho ) según sea necesario
Esto incrustará el MP3 en su sitio web utilizando el reproductor de Google Drive. Los usuarios pueden jugar, limpiar y ajustar el volumen, al igual que con el reproductor HTML5
Inserte un MP3 en su sitio web con un CMS
Si utiliza un sistema de gestión de contenido (CMS) para su sitio web , es probable que aún pueda utilizar los métodos anteriores. Dicho esto, es posible que no se sienta cómodo editando código HTML.
Cualquier buen CMS le permitirá agregar audio a su sitio web fácilmente a través de su interfaz. Por ejemplo, en WordPress, simplemente necesita agregar un bloque , seleccionar Audio y luego Cargar el MP3, seleccionarlo de su Biblioteca de Medios o Insertar desde URL.
Ya sea que esté utilizando Google Sites, ExpressionEngine o un servicio como Squarespace, el proceso para agregar audio será ligeramente diferente, así que asegúrese de consultar la documentación de ayuda de la compañía para obtener una guía completa.
Gracias por visitar este sitio, espero que te haya gustado y vuelvas proximamente, compartela en las redes sociales, gracias
Fecha actualización el 2021-05-27. Fecha publicación el 2021-05-27. Categoría: Apple Autor: Oscar olg Mapa del sitio Fuente: muo