¿Cómo incrustar la lista de reproducción de SoundCloud en el sitio de WordPress?

WordPress ofrece códigos cortos predeterminados para insertar listas de reproducción y audio en su sitio. Esto será muy útil cuando aloje pocos archivos de audio en su propio servidor. Pero la mayoría de nosotros no somos músicos para componer nuestro propio audio y usar el audio de alguien resultará en una infracción de derechos de autor. Aquí vienen los terceros como SoundCloud que ofrecen servicios de alojamiento de audio y permiten a los usuarios públicos compartir la música bajo licencias acordadas. También cuando tiene una gran cantidad de archivos de audio, es una buena idea alojarlos fuera de su servidor. No solo ayudará a mejorar la velocidad de carga de la página de su sitio, sino que también ayudará a llegar a un público más amplio.

En este artículo explicaremos cómo incrustar la lista de reproducción de SoundCloud en su sitio de WordPress, ambos WordPress.com y WordPress.org sitio.

Paso 1: Crea una lista de reproducción en SoundCloud

Regístrate para obtener una cuenta gratuita de SoundCloud y crea una lista de reproducción con tus canciones favoritas. Vea todas sus listas de reproducción en el menú «Colección > Listas de reproducción», como se muestra a continuación:

 Visualización de listas de reproducción en SoundCloud

Visualización de listas de reproducción en SoundCloud

Paso 2: Obtenga el código de inserción para la lista de reproducción

Haga clic en la lista de reproducción que desea compartir en su sitio de WordPress. Verá la lista de las pistas agregadas en la lista de reproducción y haga clic en el botón «Compartir». También puede activar o desactivar el barajado de listas de reproducción aquí.

 Compartir lista de reproducción de SoundCloud

Compartir lista de reproducción de SoundCloud

Aparecerá una pantalla emergente que ofrece tres opciones para compartir: Compartir, Incrustar y Enviar mensajes. Vaya a la pestaña» Incrustar», elija el diseño de pantalla y obtenga el código de incrustación para su sitio de WordPress.

Paso 2.1-Código de inserción para WordPress.com Usuarios

SoundCloud tiene un código corto compatible solo para WordPress.com usuarios. Elija la casilla de verificación «Código de WordPress» para obtener el código corto para su WordPress.com sitio.

 Obtener código de inserción para WordPress

Obtener Código de inserción para WordPress

El código de inserción para WordPress.com los usuarios se verán algo como a continuación:


Desplácese hacia abajo hasta la pantalla y haga clic en «Más opciones» para cambiar el color y habilitar o deshabilitar la reproducción automática de su lista de reproducción.

 Habilitar la reproducción automática

Habilitar la reproducción automática

Vea la vista previa de su lista de reproducción y copie el código que se muestra en el cuadro de texto bajo «Código y vista previa».

Paso 2.2-Código de inserción para WordPress.org Usuarios

Si tiene un alojamiento propio WordPress.org a continuación, asegúrese de desactivar la casilla de verificación» código de WordPress » y obtener el código de inserción. Debe ser un código iframe como se muestra a continuación:

<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/299620824&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

Paso 3-Insertar código de inserción de SoundCloud en WordPress

Si obtuvo el código de inserción para WordPress.com o WordPress.org el proceso de inserción es el mismo y simple. Simplemente pegue el código de inserción en su publicación o página similar a cualquier contenido de texto en el editor de «Texto». Debe publicar su sitio para ver el reproductor de audio en WordPress.com el sitio mientras cambia al editor «Visual» mostrará el reproductor de audio en WordPress.org sitio. A continuación se muestra un ejemplo real de reproductor de SoundCloud en WordPress.org sitio.

Las propiedades de anchura, altura y reproducción automática del reproductor se pueden modificar directamente dentro del código de inserción. También es posible cambiar el aspecto del reproductor añadiendo el parámetro «visual = true». Por ejemplo, el reproductor predeterminado de arriba se puede modificar como se muestra a continuación utilizando el código dado:

<iframe width = «100%» height = » 300 «scroll =» no «frameborder =» yes » src=»https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/299620824&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true»></iframe>

Puede agregar el reproductor en el área de widgets de barra lateral y pie de página pegando el código con el widget «Texto».

Insertar URL compartidas en WordPress

También es posible insertar reproductor de audio utilizando la URL compartida. Al hacer clic en el botón» Compartir», simplemente copie la URL en la pestaña» Compartir «y péguela en su editor» Visual » de WordPress.

 Código de URL compartido de SoundCloud

Código de URL compartido de SoundCloud

Presione entrar para ver que WordPress convierte automáticamente esa URL en una lista de reproducción como la siguiente.

Puntos para recordar

  • SoundCloud permite compartir pistas de audio individuales, listas de reproducción y el perfil de su cuenta en su sitio de WordPress.
  • Puede usar tanto el método compartir URL como el método incrustar código.
  • El método de compartir URL es bueno para compartir sus propias listas de reproducción con una imagen de perfil amplia. Se recomienda insertar código para reproducir los archivos de audio de otros.
  • La URL compartida debe pegarse en el editor «Visual» y el reproductor puede verse en el editor.
  • Código de inserción para WordPress.el sitio com debe pegarse en el editor «Visual» y el reproductor de audio solo será visible en el sitio publicado.
  • Código de inserción para WordPress.org el sitio debe pegarse en el editor de «Texto» y el reproductor puede verse en el editor.
  • WordPress.com soporta códigos cortos de SoundCloud mientras WordPress.org no lo hace. Así que asegúrese de obtener el código de inserción correcto para su reproductor de audio.
  • El reproductor se puede personalizar modificando los parámetros predeterminados en el código de inserción. Pero el reproductor insertado a través de una URL compartida no se puede personalizar.
  • WordPress.org tiene muchos complementos gratuitos para crear código corto de SoundCloud e incrustar la lista de reproducción.

Write a Comment

Tu dirección de correo electrónico no será publicada.