Insertar un audio en Gutenberg alojado fuera de WordPress

El bloque de audio de Gutenberg nos permite insertar audios en nuestro contenido incluyendo un reproductor de diseño minimalista y limpio.

Pero, ¿qué pasa cuando no queremos alojar los audios en nuestra biblioteca de medios de WordPress?

A la hora de insertar un audio en WordPress utilizando el bloque de audio de Gutenberg, encontramos las siguientes opciones:

• Buscar en nuestra Biblioteca de medios el audio que queremos insertar.
• Insertar el audio mediante URL.
• Subir un audio a nuestra Biblioteca de medios para luego insertarlo desde ahí, directamente o mediante URL.

¿Problema?

Que, como veis, siempre hay que pasar por subir el archivo de audio en cuestión a la Biblioteca de medios. Y si no se trata de algo puntual, sino que tenemos que subir muchos archivos de este tipo (e incluso de cierta duración), pues no es muy buena idea.

Otra opción sería usar el bloque de URL de Incrustado, pero solo admite URL’s de determinadas plataformas (como Spotify, SoundCloud…) que ya ofrecen una previsualización decente. Pero tendrías que tener el audio subido a alguna de esas plataformas.

En mi caso, quería insertar unos audios alojados en Google Drive.

Si lo intentaba insertar mediante el bloque de Audio, usando la URL de compartir del archivo que me daba Drive, no funcionaba. Y si lo intentaba insertar mediante el bloque de URL de Incrustado, ni siquiera me dejaba hacerlo.

Probé otra opción, que consistía en abrir el archivo de audio en Google Drive, ir a los tres puntitos (arriba a la derecha) y hacer clic en «Abrir en una ventana nueva» del menú desplegable. Luego, volver a hacer clic en los tres puntitos y en «Insertar elemento».

Eso devolvía un código HTML (iframe) que copié y pegué en un bloque HTML de Gutenberg.

En este caso, el audio funcionaba, pero el diseño del reproductos que aparecía era más que feo, como podeis ver en la siguiente captura.

Así que seguía sin servirme…

¿Qué hice?

Se lo comenté a mis amigos Carlos Longarela, Vicent Sanchis y Adrián Cobo a la hora del café y nos pusimos a buscar en Internet y a trastear.

Y de ello surgió la solución, tanto para insertar un audio alojado en Dropbox como para alojar un audio alojado en Google Drive. Así que ¡vamos a verlas!

Cómo insertar en Gutenberg un audio alojado en Dropbox

Para insertar un audio con el bloque de audio de Gutenberg en WP desde Dropbox, hay que coger la url de compartir el archivo que da Dropbox. Algo así como esto:y hacer lo siguiente:

https://www.dropbox.com/s/ms073rag2t0w87e/Planificaci%C3%B3n%20m%C3%ADnima%20e%20pensable.mp3?dl=

A esa URL le tenemos que quitar dl= del final y añadir en su lugar raw=1.

Y quedará una URL como esta, que será la que tendremos que insertar en el bloque:

https://www.dropbox.com/s/ms073rag2t0w87e/Planificaci%C3%B3n%20m%C3%ADnima%20e%20pensable.mp3?raw=1

Cómo insertar en Gutenberg un audio alojado en Google Drive

Para insertar un audio con el bloque de audio de Gutenberg en WordPress desde Google Drive, hay que hacer lo siguiente:

Sustituir el ID de esta URL (representado por las equis) por el ID del archivo de audio alojado en Google Drive que quieres insertar.

http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX

El ID del audio lo puedes encontrar en el enlace para compartir el archivo que da Google Drive:

https://drive.google.com/file/d/1DtTRMoW-0wazB8Uf1yu4VYN8Wd9PMlIg/view?usp=sharing

Y queda una URL así:

http://docs.google.com/uc?export=open&id=1DtTRMoW-0wazB8Uf1yu4VYN8Wd9PMlIg

Esa URL es la que hay que copiar en el bloque de audio de Gutenberg para que quede todo perfecto y funcionando :-)

Yo lo voy a usar para crear mis cursos y algunas otras cosas que tengo pensadas.

¿Para qué vas a usarlo tú?

Si quieres aprender a montar o a gestionar mejor tu ecommerce WordPress, únete a mi comunidad para no perderte nada.