Integrar audio mp3 alojado en Dropbox con HTML5

A mediados de este mismo mes de febrero de 2024 Dropbox ha introducido unos importantes cambios en los enlaces de los archivos compartidos, si bien estos cambios para la mayoría de usuarios y usos de estos enlaces carecen de una gran importancia, sí son decisivos de cara a utilizar un reproductor HTML5 para integrar audios mp3 que tengamos alojados en nuestra cuenta de Dropbox.

En resumen, Dropbox introduce una nueva arquitectura actualizada de enlaces compartidos en la que los enlaces se basan en el contenido y no en los usuarios.

Veamos a continuación cómo configurar el código correctamente de forma que solo tengamos que hacer unos pequeños cambios en la URL del enlace para compartir que obtendremos directamente desde nuestra cuenta de Dropbox.

En primer lugar subimos el archivo MP3 a nuestra cuenta de Dropbox y elegimos la opción Copiar enlace.

A continuación hay que modificar el enlace original sustituyendo la coletilla final "dl=0" por "raw=1"

Ejemplo de enlace original:

https://www.dropbox.com/scl/fi/ohyzgwdiq7pq92i4ifhls/Entrada-ambient.mp3?rlkey=a50satwakhp5uvta3slfq8w94&dl=0

Enlace modificado:

https://www.dropbox.com/scl/fi/ohyzgwdiq7pq92i4ifhls/Entrada-ambient.mp3?rlkey=a50satwakhp5uvta3slfq8w94&raw=1

Ahora ya podemos configurar nuestro código de inserción, el código genérico será del tipo:

<audio width="300" height="32" src="enlacemodificado" controls autoplay loop>

</audio>

Y qué mejor muestra que ver un audio integrado funcionando correctamente...

Por cierto, este audio ha sido creado con la Inteligencia Artificial de AIVA.

Si lo deseas, puedes descargar estas instrucciones simplificadas en TXT desde aquí.