Cómo usar el bloque de audio de WordPress

Publicado: 2021-09-15

El bloque de audio de WordPress le permite proporcionar archivos de audio reproducibles dentro de sus páginas y publicaciones. Los archivos de audio se pueden agregar desde su biblioteca de medios o una URL. Los usuarios pueden reproducir el audio desde sus navegadores o descargarlo para escucharlo sin conexión. Esta es una excelente manera de proporcionar música, podcasts u otros tipos de archivos de audio para que los visitantes los escuchen y usen.

En este artículo, veremos el Bloque de audio y veremos cómo funciona. También veremos cómo agregarlo a sus publicaciones y páginas, veremos consejos y mejores prácticas para usarlo y veremos las preguntas frecuentes.

Cómo agregar el bloque de audio a su publicación o página

Cómo agregar el bloque de audio a su publicación o página

Para agregar un bloque de audio, haga clic en el Insertador de bloques en la ubicación donde desea colocar el bloque o selecciónelo en la esquina superior izquierda. Busque Audio y haga clic en él.

Cómo agregar el bloque de audio a su publicación o página

Alternativamente, puede escribir / audio y presionar enter donde desea colocar el bloque.

Cómo agregar el bloque de audio a su publicación o página

El bloque de audio se agregará a su contenido donde puede agregar un archivo de audio para reproducir o descargar. Haga clic para cargar el archivo de audio, selecciónelo de su biblioteca o ingrese una URL para el archivo.

Cómo agregar el bloque de audio a su publicación o página

Su archivo de audio se mostrará como un reproductor de audio completo con un título donde puede ingresar el nombre u otra información sobre el archivo. Incluye las opciones básicas del reproductor de audio.

Cómo agregar el bloque de audio a su publicación o página

Al pasar el cursor sobre el icono de volumen, se abre el control deslizante donde el usuario puede cambiar el nivel de volumen.

Cómo agregar el bloque de audio a su publicación o página

A la derecha hay tres puntos que abren opciones para el usuario. Esto tiene un enlace de descarga.

Configuración y opciones de bloqueo de audio

Configuración y opciones de bloqueo de audio

El Bloque de audio incluye configuraciones y opciones dentro del propio bloque y la barra lateral derecha. Echemos un vistazo a ambos.

Barra de herramientas de bloque de audio

Barra de herramientas de bloque de audio

La barra de herramientas del Bloque de audio se coloca encima del bloque. Aparece cuando selecciona el bloque e incluye menos herramientas que la mayoría de los bloques de WordPress.

Cambiar el tipo o estilo de bloque

Cambiar el tipo o estilo de bloque

Transforme el bloque en columnas, un bloque de archivos para permitir a los usuarios descargar el audio como un archivo o un grupo al que se le puede dar estilo. Estoy pasando el cursor sobre Archivo en este ejemplo. Proporciona una vista previa de cómo se vería el archivo como un Bloque de archivo.

Arrastra y mueve

Arrastra y mueve

La herramienta Arrastrar, el icono con 6 puntos, te permite arrastrar el bloque a cualquier lugar que desees. La herramienta Mover, las flechas hacia arriba y hacia abajo, mueve el bloque hacia arriba o hacia abajo un espacio de contenido cada vez que hace clic en una flecha. Ambos proporcionan una manera fácil de mover el bloque por su área de contenido.

Cambiar alineación

Cambiar alineación

Las opciones de alineación determinan la ubicación del bloque en la pantalla. Las opciones incluyen izquierda, derecha, ancho ancho y ancho completo. Elegir izquierda o derecha lo coloca en ese lado de la pantalla y lo envuelve con el bloque de contenido debajo de él.

Cambiar alineación

Este es el ancho ancho, que ocupa la mayor parte del ancho de la pantalla.

Reemplazar

Reemplazar

Esta opción le permite reemplazar el archivo de audio sin eliminar el bloque. Abra la biblioteca, cargue un archivo o ingrese la URL del archivo.

Opciones

Opciones

La opción incluye la configuración estándar que se encuentra en la mayoría de los bloques de WordPress:

Ocultar más configuraciones : esto oculta la barra lateral derecha.

Copiar : esto copia el bloque para que pueda pegarlo en otro lugar dentro de su contenido.

Duplicar : esto agrega un duplicado del bloque debajo del original.

Insertar antes : esto coloca un espacio para un bloque antes del bloque.

Insertar después : esto coloca un espacio para un bloque después del bloque.

Mover a : esto le permite mover el bloque usando una línea azul para elegir su ubicación.

Editar como HTML : esto cambia el bloque a la vista del editor de código para que pueda editar el HTML sin cambiar el resto de los bloques.

Agregar a bloques reutilizables : esto agrega el bloque a su lista de bloques reutilizables.

Grupo : esto agrega el bloque a un grupo para que pueda ajustarlos como una sola unidad.

Eliminar bloque : esto elimina el bloque.

Subtítulo

Subtítulo

El título tiene otro conjunto de opciones que incluye configuraciones para texto en negrita y cursiva, enlaces y más opciones. He usado muchos de ellos en este ejemplo. Afectan al texto que estás resaltando.

Las opciones en negrita y cursiva se pueden usar juntas o de forma independiente. Agregué negrita y cursiva a la palabra "Esto" en el ejemplo anterior.

Para el enlace, verá sugerencias de los que ha usado antes. Incluye una opción para abrir el enlace en una nueva pestaña. Agregué un enlace a la palabra "audio" en el ejemplo anterior.

Hacer clic en Más opciones tiene configuraciones para diseñar el texto. Todos afectan el texto que estás resaltando. He usado varios de ellos en el ejemplo anterior. Incluyen:

Código en línea : esto le da estilo al texto para que se vea como un código.

Imagen en línea : esto agrega una imagen en línea de su biblioteca de medios, como lo hice entre las palabras "audio" y "título".

Entrada de teclado: aplica estilo al texto con el formato HTML del teclado que utiliza su navegador.

Tachado : esto coloca una línea a través del texto, como la palabra "título" en el ejemplo anterior.

Subíndice : esto hace que el texto sea más bajo y más pequeño que el resto, como la palabra "Usted" en el ejemplo anterior.

Superíndice : esto hace que el texto sea más alto y más pequeño que el resto.

Color del texto : esto abre herramientas de color para cambiar el color del texto, como hice con la palabra "usted" en el ejemplo anterior. Elija entre colores preseleccionados o cree un color personalizado. Para colores personalizados, puede usar el selector de color o ingresar el código hexadecimal, el código RGB o el código HSL.

Configuración de la barra lateral del bloque de audio

Configuración de la barra lateral del bloque de audio

La configuración de la barra lateral agrega configuraciones de audio y configuraciones avanzadas. Seleccione el engranaje para abrir la configuración si la barra lateral no se muestra. Seleccione el bloque para ver la configuración de este bloque específico. Veamos más de cerca la configuración.

Configuraciones de audio

Configuraciones de audio

Configuración de audio le permite elegir cómo el reproductor de audio maneja el archivo. Configurarlo en reproducción automática iniciará el archivo cuando se cargue la página. Configurarlo en bucle hace que el archivo comience de nuevo cuando llega al final del archivo.

También puede elegir cómo funciona la precarga. Esto determina la cantidad de archivo que se descarga cuando la página se carga en el navegador del usuario. Las opciones incluyen:

Automático : descarga todo el archivo de audio incluso si el usuario no hace clic para reproducirlo.

Metadatos : descarga solo el texto, que es la información básica sobre el archivo. El archivo de audio en sí no se descarga a menos que el usuario seleccione reproducir el archivo.

Ninguno : no se descarga información ni datos automáticamente.

Avanzado

Audio avanzado

La configuración avanzada incluye campos para el ancla HTML y clases CSS adicionales. El ancla HTML es una URL que le permite vincular directamente al bloque. El campo Clases de CSS adicionales le permite agregar clases de CSS para diseñar el bloque.

Consejos y prácticas recomendadas para utilizar el bloque de audio de forma eficaz

Utilice la leyenda para mostrar el nombre del archivo de audio.

Utilice encabezados y párrafos claros para describir los archivos. Esto informa al usuario de qué esperar.

Establezca la precarga en none o metadata para acelerar la carga de la página para cualquier bloque que no necesite reproducción automática.

Utilice la reproducción automática y el bucle para las llamadas a la acción del producto. Desactive la reproducción automática y el bucle para otros bloques de audio en la página.

Elija Grupo para diseñar el fondo del reproductor de audio.

Utilice este bloque para incrustar audio en sus páginas y publicaciones.

Utilice un bloque de incrustación con la URL del archivo si no desea incluir un botón de descarga.

Preguntas frecuentes sobre el bloque de audio

¿Qué hace el bloque de audio?

Agrega un reproductor de audio a su sitio web que permite a los usuarios reproducir o descargar un archivo de audio.

¿Cuál es la ventaja de usar Audio Block?

Crea un reproductor, por lo que los usuarios saben que hay un archivo de audio disponible para que lo escuchen.

¿Se puede transformar en otros bloques?

Si. También se puede transformar en un bloque de archivos, columnas o un grupo. El Bloque de archivos permite a los usuarios descargar el archivo en lugar de reproducirlo a través de sus navegadores.

¿Se pueden usar otros bloques para archivos de audio?

Si. Puede pegar la URL en un Bloque de inserción, pero no tiene la configuración de audio que tiene el Bloque de audio. Le dará un reproductor de audio en la parte frontal, pero no es tan elegante como el que proporciona este bloque. La versión incorporada incluye la hora en la barra de seguimiento, pero no incluye una opción de descarga ni un título.

¿Cuáles son los mejores usos para este bloque?

Este bloque se puede utilizar para música, pistas de audio, muestras de álbumes, podcasts, sermones, cursos de audio, audiolibros, etc.

¿Qué tipos de archivos puede usar el bloque?

El bloque de audio es compatible con archivos .mp3, .m4a, .ogg y .wav. El reproductor se ve y funciona igual con cada uno de los tipos de archivos.

Conclusión

Ese es nuestro vistazo al bloque de audio de WordPress. Es un bloque simple con algunas configuraciones. Tiene control sobre su ubicación dentro de su contenido y cómo funciona dentro de los navegadores de sus visitantes. Este bloque es una excelente opción para cualquier tipo de archivo de audio que sea compatible con WordPress.

Queremos escuchar de ti. ¿Usas el bloque de audio? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de Everything bagel / shutterstock.com