Cómo agregar un reproductor de música gratuito a su sitio WordPres

Spanish (Español) translation by lás (you can also view the original English article)

Cualquier sitio web que permita que los usuarios descubran, compren, compartan o descarguen música o efectos de sonido siempre debe tener un reproductor de audio. Todos los usuarios desean tener una vista previa del audio o la música para determinar si desean comprarlo o compartirlo. Darles a usuarios la opción de reproducir audio desde la página web en sí, sin la necesidad de descargar nada, dará como resultado una mejor experiencia de usuario.

Afortunadamente, WordPress ofrece complementos gratuitos y premium para agregar reproductores de audio a cualquier página web. La mayoría de los complementos gratuitos harán el trabajo por ti, pero solo algunos le permiten adaptar el aspecto del reproductor al diseño general del sitio web.

En este tutorial, aprenderá sobre un complemento completamente gratuito llamado Audio Album (Álbum de audio) que le permitirá incrustar archivos de audio en una página web y diseñar su propia interfaz de reproductor de música con control total sobre su apariencia.

Descripción general de Audio Album

Este complemento está destinado básicamente a agrupar diferentes archivos de audio. Por ejemplo, supongamos que tiene diez canciones diferentes de un solo artista. Con este complemento, puede agruparlos a todos bajo un solo encabezado como álbum. El estilo consistente podría aplicarse a todo el álbum para que se destaque. Puede usar el complemento para agregar varios álbumes en la misma página.

Estas son algunas de sus características:

El complemento es totalmente responsivo. Por defecto, cubrirá todo el ancho del elemento padre.
Puede usar fuentes personalizadas para el reproductor de música. De forma predeterminada, el complemento heredará las fuentes del tema en sí, pero también puede especificar otras fuentes.
El complemento es fácil de personalizar y le permite cambiar el color del álbum, el reproductor, el texto y las barras de tiempo y volumen.

El complemento también es muy fácil de usar y configurar. ¡Ahora, comencemos y creemos un reproductor de música!

Crear el reproductor de música

El complemento ofrece dos códigos cortos: [audioalbum] y [audiotrack]. Ambos son necesarios para crear el jugador.

El shortcode [audioalbum] crea el encabezado del álbum. Puede usar los parámetros de title (título), detail (detalle) y date (fecha) dentro de él para proporcionar información relevante sobre el álbum o la lista de música que está creando.

El título aparecerá en letras grandes, y el detalle o la fecha se mostrarán debajo de él. Aquí hay un ejemplo para mostrar cómo puede usar este codigo:

1	[audioalbum title="Stay Motivated" detail="Upbeat music by different artists" date="May 2019"]

El shortcode[audiotrack] también tiene un par de parámetros que le permiten especificar la fuente de audio y las propiedades, como si se debe reproducir en bucle, reproducir automáticamente o precargar. Los atributos de title (título) y songwriter (compositor) se pueden usar para proporcionar información sobre el título de la canción y su creador. Aquí hay unos ejemplos:

[audiotrack title="Inspiration" songwriter="Rafael Krux" mp3="path/to/music/inspiration.mp3"]

[audiotrack title="Funshine" songwriter="Kevin MacLeod" mp3="path/to/music/funshine.mp3"]

[audiotrack title="Pickled Pink" songwriter="Kevin MacLeod" mp3="path/to/music/pickled_pink.mp3"]

Asegúrese de especificar la fuente correcta para la canción. Solo estas cuatro líneas crearán un reproductor de música en su página web que se parece a siguiente imagen.

Puedes agregar los atributos autoplay="true" y loop="true" a una de estas canciones, y seguiría reproduciéndose sin fin, sin que el usuario presione el botón de reproducción.

Personalizar el reproductor de música

Hay dos formas diferentes de personalizar la apariencia del reproductor de música que acabamos de crear.

La forma más fácil sería simplemente ir a Apariencia > Personalizar > Álbum de audio. Allí, podrás cambiar el fondo del álbum, el fondo del reproductor y el color de todo el texto y los botones.

Si deseas realizar otros cambios en la apariencia del reproductor de música, tendrá que escribir su propio CSS para reemplazar o anular el estilo proporcionado por el complemento. Puede eliminar el CSS aplicado por el complemento marcando la casilla de verificación Manual CSS en la parte inferior.

Ahora, puede aplicar su propio CSS al reproductor y personalizar su apariencia exactamente como lo desee. Sin embargo, en lugar de comenzar desde cero, podría ser mejor si simplemente toma el CSS aplicado por el complemento como punto de partida y lo coloca en su propia hoja de estilo para que pueda hacer cambios cuando sea necesario en lugar de reescribir todo.

Creé el siguiente tema para el reproductor de música del álbum de audio sobrescribiendo algunas reglas CSS en la hoja de estilo del complemento.

Estas son las reglas de CSS que cambié para obtener el aspecto deseado para mi reproductor de música:

h2.audioalbum {
        font-family: 'passion One';
	font-size: 3rem;
	background: black;
	border-top: 10px solid red;
}

p.audioalbum {
	font-family: 'Exo';
	font-weight: 600;
	font-size: 1.25rem;
	text-transform: uppercase;
	background: linear-gradient(70deg, red 70%, black 70%);
	border-bottom: 5px solid black;
	padding: 10px 10px 5px 10px;
}

.track .songtitle::before {
	box-sizing: border-box;
	content: counter(track);
	counter-increment: track;
	display: inline-block;
	width: 40px;
	background: black;
	position: relative;
	top: 10px;
	left: 10px;
	height: 40px;
	line-height: 1;
	text-align: center;
	border: 4px solid white;
	padding-top: 5px;
	font-weight: bold;
	font-family: 'Passion One';
	font-size: 1.5rem;
	margin-right: 20px;
}

.track .songtitle {
	clear: right;
	display: block;
	font-size: 1.5rem;
	padding: 10px 0 0 0;
	font-family: 'Exo';
}

.track .songwriter {
	color: #fff;
	display: block;
	font-size: 12px;
	line-height: 1;
	opacity: 1;
	padding-left: 60px;
}

.track .wp-audio-shortcode.mejs-audio .mejs-inner>.mejs-controls,
.track .audiobutton a {
	background: black;
}

.track .mejs-controls .mejs-time-rail .mejs-time-total,
.track .mejs-time-rail .mejs-time-total .mejs-time-loaded,
.track .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	background: orange;
	border-radius: 10px;
}

.track .mejs-time-rail .mejs-time-total .mejs-time-current,
.track .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	background: red;
	border-bottom: 5px solid white;
	border-radius: 10px;
}

El selector h2.audioalbum controla la apariencia del encabezado principal en el reproductor de música. Las reglas CSS aplicadas a p.audioalbum controlarán la apariencia del subtítulo. El uso estratégico de gradientes lineales y valores de detención de color crea la inclinación en las barras título en el subtítulo.

Experimenta con diferentes valores para varias reglas CSS aplicadas a todos los elementos del reproductor de música para crear un tema único.

Opciones adicionales del reproductor de música

Hay cuatro parámetros adicionales que puede usar con el shortcode [audiotrack] para crear ventanas emergentes. Estas ventanas emergentes se pueden usar para mostrar a los usuarios información adicional sobre la canción o la música que están reproduciendo. Por ejemplo, puedes proporcionar un enlace con cada pista para abrir una página de compra, una página de letras o alguna otra página de información de licencia.

Estos cuatro parámetros son buttonlink, buttontext, width y height. Los parámetros width y height se utilizan para especificar el ancho y alto de la ventana emergente. El parámetro buttonlink almacena la página o el ID de publicación de la página web de destino que desea abrir en la ventana emergente. Finalmente, el parámetro buttontext se usa para especificar el texto para el enlace. Si no se especifica, el texto del enlace se establece en lyrics.

Aquí hay un ejemplo usando estos parámetros:

[audiotrack title="Inspiration" songwriter="Rafael Krux" mp3="path/to/music/inspiration.mp3" buttonlink="820" buttontext="More from Artist"]

[audiotrack title="Funshine" songwriter="Kevin MacLeod" mp3="path/to/music/funshine.mp3" buttonlink="843" buttontext="Share"]

[audiotrack title="Pickled Pink" songwriter="Kevin MacLeod" mp3="path/to/music/pickled_pink.mp3" buttonlink="909" buttontext="Purchase"]

Como puedes ver, cada pista puede tener su propio valor para los parámetros buttonlink y buttontext. Aquí está la salida representada:

Al hacer clic en cualquiera de estos botones de compra, se abrirá una ventana emergente con una página web o publicación determinada por la identificación especificada en el parámetro buttonlink.

Pensamientos finales

Como viste en este tutorial, el complemento Audio Album facilita agregar un reproductor de audio o música a tu sitio web. Todo lo que necesita hacer es agregar un par de códigos cortos a la página web donde desea que aparezca el reproductor de música. También puede mostrar múltiples reproductores en la misma página web para crear múltiples grupos para diferentes tipos de música o canciones. Puede visitar la página del complemento para leer las preguntas frecuentes sobre el álbum de audio.

El color del álbum, la pista o los botones y el control también se pueden cambiar muy fácilmente. La personalización completa es posible si conoce un poco de CSS. ¡Siéntase libre de mostrar sus propias máscaras de complementos de Álbum de audio en los comentarios a continuación!