Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)
Hoy exploraremos el complemento HTML5 Audio Player, que te permite incrustar y reproducir archivos de audio en tu sitio de WordPress. En este artículo, revisaremos las diferentes características de este complemento y también exploraremos cómo usarlo para incrustar reproductores de audio en tu sitio de WordPress.
Hay varias razones por las que quizá quieras integrar un reproductor de audio en tu sitio web que pueda reproducir diferentes formatos de audio para tus visitantes; desde luego, si estás creando un sitio web sobre música, este es un requisito imprescindible. Además, te convendría elegir un reproductor de audio fácil de usar y ligero que haga el trabajo por ti.
Tú sabes ya que WordPress proporciona muchos complementos para casi cualquier función en la que uno pueda pensar, y puede ser difícil elegir cuál usar. Y cuando se trata de elegir el reproductor de audio adecuado para tu sitio de WordPress, encontrarás muchas opciones en la tienda de complementos de WordPress. Entre ellos, he elegido uno de los mejores: HTML5 Audio Player.
El complemento HTML5 Audio Player te permite reproducir diferentes tipos de archivos de audio al integrar un reproductor de audio simple y fácil de usar. Entre los diferentes tipos de formatos de audio, este es compatible con .mp3, .ogg y .wav por defecto. Con algunas útiles opciones de personalización, podrás crear un reproductor adaptado a tus necesidades.
Para este artículo, he usado WordPress 5.2.1 y la versión del complemento HTML Audio Player es la 1.1. Yo te recomiendo que lo instales si quieres seguir los pasos de este artículo. Para instalar el complemento HTML Audio Player, necesitas seguir el proceso de instalación de complementos estándar en WordPress.
En las próximas secciones, exploraremos las configuraciones básicas del complemento HTML Audio Player junto con el proceso de instalación. Además, veremos cómo integrar el reproductor de audio en tu sitio con fines de demostración. Finalmente, también revisaremos algunas características importantes de este complemento que te permiten personalizar las configuraciones del reproductor.
¿Por qué usar el complemento HTML5 Audio Player?
El complemento HTML5 Audio Player te permite integrar un reproductor de audio simple y fácil de usar a tu sitio web de WordPress. Es compatible con todos los dispositivos y te permite colocar reproductores de audio en casi cualquier lugar de tu sitio, ya sea una entrada, una página o un widget.
Además, ofrece muchas opciones de personalización que te permiten cambiar los controles del reproductor de audio además de su apariencia.
Veamos rápidamente las características importantes que proporciona:
- compatible con dispositivos de escritorio, móviles y tabletas
- capacidad para configurar los botones
- soporte para código abreviado
- soporte para reproductores alineados
- funciona en todos los principales navegadores
- y más
Entonces, como puedes ver, este complemento proporciona muchas características útiles que puedes usar al incrustar el reproductor de audio en tu sitio web de WordPress.
En la siguiente sección, discutiremos un par de pantallas de configuración que son importantes de comprender si quieres usar este complemento de manera efectiva.
Explora las configuraciones del complemento
Una vez que instales el complemento HTML5 Audio Player, este agregará un enlace en el menú de administración de tu sitio. En esta sección, revisaremos cada pestaña del administrador del reproductor de audio.
HTML5 Audio Player
Esta página lista todos los reproductores de audio que han sido creados hasta ahora en tu aplicación. Junto con los campos title (título) y date (fecha), también muestra el campo shortcode (código abreviado) que puedes usar en una página, entrada o widget para incrustar este reproductor.
Aparte de eso, puedes usar el enlace Add Audio Player (Agregar reproductor de audio) para crear un reproductor nuevo. Al crear un reproductor nuevo, podrás ajustar configuraciones específicas del mismo. Regresaremos a esto en la siguiente sección, en la que crearemos un reproductor de audio con fines de demostración.
Agrega un reproductor de audio
Este es un acceso directo que te permite crear un nuevo reproductor de audio directamente. De lo contrario, tendrías que ir a la página del listado de los reproductores de audio para crear un reproductor de audio nuevo.
En la siguiente sección, exploraremos cómo crear realmente un reproductor de audio para tu sitio.
Agrega un reproductor de audio HTML5 a tu sitio de WordPress
En esta sección, demostraré cómo usar este complemento para incrustar reproductores de audio en tu sitio de WordPress. Solamente agregaremos un reproductor, pero tú puedes incrustar múltiples reproductores de audio, cada uno con diferentes configuraciones.
Antes de que continuemos, asegúrate de haber instalado el complemento HTML5 Audio Player en tu sitio de WordPress si quieres seguir los pasos.
Continúa y accede al enlace HTML5 Audio Player > Add Audio Player (HTML5 Audio Player > Agregar reproductor de audio) en la barra lateral izquierda de la sección de administración, y este deberá presentarte la siguiente interfaz de usuario para agregar un nuevo reproductor de audio.
Escribe el título de tu reproductor de audio en el campo Title (Título).
A continuación se encuentra el campo Upload audio (Cargar audio), que te permite cargar nuevos audios o seleccionar de entre archivos de audio que ya se encuentran disponibles en tu servidor. Por favor toma en cuenta que actualmente es compatible con los formatos de audio .mp3, .ogg y .wav. Así que selecciona el archivo de audio que se ejecutará en tu reproductor de audio una vez que se haya cargado.
Siguiendo adelante, el campo Repeat (Repetir) te permite elegir si el audio se repetirá una vez que haya terminado. Hay dos opciones de entre las que podrías elegir: Repeat Once (Repetir una vez) y Repeat again and again (Repetir una y otra vez). Selecciona la opción adecuada según tus requisitos.
A continuación se encuentra el campo Muted (Silenciado), que te permite silenciar la salida de audio. Por otro lado, la opción Auto Play (Reproducción automática) te permite reproducir el audio tan pronto como se haya cargado y esté listo.
Finalmente, la opción Player Width (Ancho del reproductor) te permite especificar el ancho de tu reproductor de audio. Por favor toma en cuenta que debes seleccionar None (Ninguno) si quieres que el reproductor de audio sea responsivo. Yo prefiero esta opción en lugar de especificar un ancho fijo, ya que si lo especificas, este puede causar problemas con el diseño de tu reproductor de audio en dispositivos móviles.
Una vez que hayas escrito los detalles necesarios, haz clic en el botón Save (Guardar) para crear un reproductor. Como discutimos anteriormente, ahora puedes copiar el código abreviado de tu reproductor de la página del listado de reproductores de audio.
Como puedes ver en la página del listado anterior, el código abreviado de tu reproductor ya está disponible para ser usado. Copia el código abreviado y agrégalo a la página en la que quieras mostrar este reproductor de audio. Yo he creado una página de ejemplo en la que agregué el código abreviado del reproductor de audio. Desde luego, también podrías usar este código en una entrada o un widget.
Vayamos al front-end para ver su apariencia:
Como puedes ver, este muestra un reproductor de audio atractivo que uno podría usar para comenzar a reproducir archivos de audio. Sigue adelante y experimenta con las diferentes opciones, y avísame si tienes alguna duda.
¡Así es como puedes incrustar un reproductor de audio en tu sitio usando este complemento gratuito!
El siguiente paso: algunos reproductores de audio avanzados
Hoy discutimos cómo podrías integrar reproductores de audio en tu sitio web de WordPress usando un complemento gratuito. Sin embargo, si necesitas tener gran control sobre la interfaz de usuario del reproductor de audio, o si necesitas más opciones para formatos de archivo o reproducción, necesitarás dar un paso adelante y conseguir un reproductor de audio prémium.
Si estás buscando reproductores de audio más avanzados que puedas usar de inmediato, te recomiendo que visites el siguiente artículo, que resume algunos scripts excelentes disponibles a un bajo costo y que proporcionan la máxima calidad.
WordPress15 de los mejores complementos de WordPress de reproductores de audio y video
WordPressAgregando un reproductor de música a tu sitio de WordPress
Conclusión
En este artículo discutimos cómo puedes incrustar reproductores de audio usando el complemento HTML5 Audio Player en WordPress. Me encantaría escucharte si quieres compartir tus experiencias sobre otros complementos de reproductores de audio que hayas usado en tu sitio web y cualquiera que quisieras recomendar.
¡No dudes en compartir tus pensamientos y comentarios usando el canal a continuación!
Además, si quieres usar complementos personalizados pero no te sientes cómodo jugando con los servidores y prefieres que alguien haga todo por ti, considera el alojamiento administrado de WordPress. Gracias a la alianza de Envato con SiteGround, puedes obtener hasta un 60% de descuento en el alojamiento administrado de WordPress.
By
