Level 2

Solved

Want to Integrate Spotify into my AEM site.

5 replies
2520 views
Translate All

Hi All,

I want to integrate Spotify on my web page. What is the best way to do it?

Thanks.

kautuk_sahniAccepted solution

Adobe Employee

There is no integration or connector component between these two products. You would have to create a custom AEM service and integrate with Spotify using its Rest API - which it supports. Here are community articles on how to hook a Restful service into AEM. To hook into a third-party service - you write an CQ OSGi bundle that contains operations that can invoke the third party service. In your custom OSGI service -- you can wrap a Java API that knows how to invoke operations of the third-party service.

Option 1 :-

Creating Adobe Experience Manager bundles that invoke third party Restful web services

http://helpx.adobe.com/experience-manager/using/creating-cq-bundles-consume-web.html

http://helpx.adobe.com/experience-manager/using/integrating-livecycle-cq-applications.html

Spotify Web API :- https://developer.spotify.com/web-api/tutorial/

Create a OSGI service or Sling Servlets and write a code to send HTTP request GET/POST in it.

Example Code :-

import org.apache.commons.httpclient.HttpClient;import org.apache.commons.httpclient.methods.PostMethod;

String url = "http://www.google.com";InputStream in = null;try {HttpClient client = new HttpClient();PostMethod method = new PostMethod(url);//Add any parameter if u want to send it with Post req.method.addParameter("p", "apple");int statusCode = client.executeMethod(method);if (statusCode != -1) {in = method.getResponseBodyAsStream();}

Option 2:-

Spotify can be programmed using JAVAScript [Spotify Widgets].

Link:- https://developer.spotify.com/technologies/widgets/

We can use Java-scripting in AEM, you can achieve the needful with the same.

Link:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html

Link:- https://docs.adobe.com/docs/en/aem/6-0/develop/sightly/use-api-in-javascript.html

I hope this would help you.

Thanks and Regards

Kautuk Sahni

smacdonald2008

Level 10

Looks like this product has a Restful API:

https://developer.spotify.com/web-api/endpoint-reference/

So basically, you would create AEM Components that use this Restful API.

Translate

kautuk_sahni

Accepted solution

Adobe Employee

There is no integration or connector component between these two products. You would have to create a custom AEM service and integrate with Spotify using its Rest API - which it supports. Here are community articles on how to hook a Restful service into AEM. To hook into a third-party service - you write an CQ OSGi bundle that contains operations that can invoke the third party service. In your custom OSGI service -- you can wrap a Java API that knows how to invoke operations of the third-party service.

Option 1 :-

Creating Adobe Experience Manager bundles that invoke third party Restful web services

http://helpx.adobe.com/experience-manager/using/creating-cq-bundles-consume-web.html

http://helpx.adobe.com/experience-manager/using/integrating-livecycle-cq-applications.html

Spotify Web API :- https://developer.spotify.com/web-api/tutorial/

Create a OSGI service or Sling Servlets and write a code to send HTTP request GET/POST in it.

Example Code :-

import org.apache.commons.httpclient.HttpClient;import org.apache.commons.httpclient.methods.PostMethod;

String url = "http://www.google.com";InputStream in = null;try {HttpClient client = new HttpClient();PostMethod method = new PostMethod(url);//Add any parameter if u want to send it with Post req.method.addParameter("p", "apple");int statusCode = client.executeMethod(method);if (statusCode != -1) {in = method.getResponseBodyAsStream();}

Option 2:-

Spotify can be programmed using JAVAScript [Spotify Widgets].

Link:- https://developer.spotify.com/technologies/widgets/

We can use Java-scripting in AEM, you can achieve the needful with the same.

Link:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html

Link:- https://docs.adobe.com/docs/en/aem/6-0/develop/sightly/use-api-in-javascript.html

I hope this would help you.

Thanks and Regards

Kautuk Sahni

Translate

Kautuk Sahni

vipintyagi

Spotify is Rest full web API. In Aem, there is two different way to consume.

1 Client site using javascript and handlebar.js

2 consume web service using java

3 Rest controller.

Using client site access token is required to consume the Spotify response. Asses token will expire after 1 hours and to get the response you have to regenerate access token and as well you have to authenticate URI that must be match to request that you have to set on Spotify application.

2. Write a component to consume a service.this will return list.

Service like this

private static final String accessToken = "BQAJYc4vWoizFY5q5r4MyDSGCGOYqyxW61PwJFxztQZjKQWCcFut_zb3BBlLIwPRwk03UD5bNS2BSNw1AjTM4zhGI8dQnhOy6YX_wB6dkb2Rqxg6k-TrxTOzP_z7YErzEYlPa_6IajvOOIzUTxdW0Hmz03zsWpd-CMKvCrVPyrP6PMGMpz-73H3QN4IoWAFh";

private static final SpotifyApi spotifyApi = new SpotifyApi.Builder() .setAccessToken(accessToken).build();

private static final GetListOfCurrentUsersPlaylistsRequest getListOfCurrentUsersPlaylistsRequest = spotifyApi.getListOfCurrentUsersPlaylists() .limit(10) .offset(0) .build();

@Override

public List<Spotify> playlist() {

List<Spotify> spotifyContent = getListOfCurrentUsersPlaylists();

return spotifyContent;

}

public List<Spotify> getListOfCurrentUsersPlaylists() {

List<Spotify> spotiFyList = new ArrayList<Spotify>();

try {

final Paging<PlaylistSimplified> playlistSimplifiedPaging = getListOfCurrentUsersPlaylistsRequest.execute();

Spotify spotifyObj = new Spotify();

PlaylistSimplified[] playlistsimplified = playlistSimplifiedPaging.getItems();

for(PlaylistSimplified paylist : playlistsimplified) {

spotifyObj.setId(paylist.getId());

spotifyObj.setName(paylist.getName());

String playListName = paylist.getName();

String playId = paylist.getId();

Image[] playListImages = paylist.getImages();

for(Image img : playListImages) {

String imgUrl = "";

imgUrl = img.getUrl();

}

spotiFyList.add(spotifyObj);

}

} catch ( SpotifyWebApiException |IOException e) {

;;;;;;;;;;;;;;;;;;

}

return spotiFyList;

}

Translate

D

DavvidHe

I would use Spotify's Embed API or Web Playback SDK to integrate it into my AEM site. The Embed API allows easy iframe-based integration, while the Web Playback SDK provides more control over playback. Depending on my needs, I would choose the best approach for seamless Spotify integration.

Translate

J

jakedo1

Yeah that’s the right direction, since AEM doesn’t have a native Spotify connector you’ll need to rely on the Web API or widgets with custom OSGi bundles. For anyone exploring stable integrations, you can also check here VCA ’s WOOFApps their official employee login system as an example of how enterprise-grade portals manage cross-platform access. It’s a good reference point when thinking about reliability and scalability.

Translate

Sign up

Login with SSO

Login to the community

Login with SSO