jueves, 29 de marzo de 2018

Cómo incluir canciones de Spotify con la portada del disco en tu página Web

Cómo incluir canciones de Spotify con la portada del disco en tu página Web

Los que seguís este blog habréis visto que en muchas ocasiones he incluido en los posts una canción con la portada del disco de manera que pulsando en el botón "play" puedes acceder al programa Spotify, instalado previamente en tu terminal, y escuchar la canción. El incluir estas canciones es debido a que mi otra gran pasión, además de la fotografía y escribir, que es la música, y un blog como éste me permite desarrollarlas todas a la vez. Con este post comienzo una nueva sección del Blog en la que voy a hablar sobre la música que incluyó en él. Si quieres conocerla te invito a seguir leyendo.

Para explicártelo vamos a tomar como ejemplo la canción que va a representar a España en Eurovisión 2018: "Tu canción".

Los pasos para incluir en tu site son los siguientes:
  • En Spotify, en la canción que quieres incluir selecciona con el botón derecho -> Compartir -> Copiar URI de Spotify:

En nuestro ejemplo: spotify:track:4KCGvQuZSg7UFmjvipUtZY

  • Ve a la dirección https://developer.spotify.com/technologies/widgets/spotify-play-button/
  • Esta es la página para desarrolladores de aplicaciones: Spotify Play Button
Cómo incluir canciones de Spotify con la portada del disco en tu página Web

  • Pulsa en el botón verde: " GENERATE YOUR PLAY WIDGETCODE HERE!"
  • Te aparece una nueva página: Play Button
Cómo incluir canciones de Spotify con la portada del disco en tu página Web
  • En el punto 2 de esa página, "Paste the link or URI in the field below:", pega la URI que copiaste con un CTRL+V 
  • Automáticamente en el punto 3. de esa página te aparece el código, en forma de iframe, para tu site.
En nuestro ejemplo: <iframe src="https://open.spotify.com/embed?uri=spotify:track:4KCGvQuZSg7UFmjvipUtZY" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

  • Selecciona todo el código y cópialo con CTRL+C
  • Además, un poco más abajo, en el punto PREVIEW, puedes ver la portada de la canción tal como quedará en tu web 
  • Con los parámetros que vienen a continuación puedes cambiar el tamaño de la portada en pixels

Cómo incluir canciones de Spotify con la portada del disco en tu página Web
  • Volviendo a tu página de edición del blog (en mi caso uso Blogger de Google) tienes pulsa el botón "HTML" y, dentro del código HTML, pega con CTRL+V, el iframe en el punto donde quieres que aparezca... y ¡ya está!
  • te tendría que aparecer:

  • Si no usas Blogger puedes incluir la canción en otros websites siguiendo las instrucciones de https://developer.spotify.com/technologies/widgets/adding-widgets-to-websites/
  • Ahora, si tienes arrancado Spotify en tu PC, al pinchar en el triángulo de PLAY escucharas la canción y podrás detenerla pulsando en el PAUSE. ¡Fácil! ¿verdad?
Este procedimiento es totalmente legal ya que no estás descargando la canción de forma pirata a tu PC, sino que lo estás escuchando en tu propia aplicación Spotify de tu PC, pero seleccionada desde tu web. La reproducción la puedes hacer también desde tablets y smartphones que tengan instalado Spotify.


Cómo iniciarte en la música de Bach y no morir en el intento

Este el título del post que publiqué donde apliqué intensivamente el procedimiento que he descrito anteriormente para ayudarte a que te inicies en la música de Bach. Puedes verlo en el siguiente link:
Te invito a que sigas conociendo "Cómo se hace la música de este Blog" en la nueva sección que encontrarás al final del menú vertical de la derecha.   



Si te ha gustado por favor haz un Retweet y compártelo en tus redes sociales
Gracias!!!

1 comentario:

  1. Muy interesante muchas gracias.
    Ahora tambien ando viendo como conseguir cuentas de spotify premium argentina. Y combinado con esta función, ya lo tendré todo.

    ResponderEliminar

Un comentario tuyo es algo muy valioso para mí ya que me hace mejorar el blog.
¡Anímate y comenta!