Hi,
In my project adobe experience manager as cloud service,
I have an embedded component in which is possible to configure spotify's iFrames. My team and I are trying to track the play,pause,and milestones events of the iframe trough the Web Playback Spotify Sdk but we are not sure it could work. Do you have any information about adobe communicate with spotify?
Does any of you ever tried something similar?
Thank you,
Sarah
Yes, you must create an embeddable under the wcmcore embed component. 2 ways to embed spotify sdk: 1) Create embeddable to load iframe ; 2) Create as custom component for additional features functionalities.
Embeddable:
Step 1: Create spotify embeddable component. Under /apps/project/components/content/embeddables/spotify/spotify.html
<sly data-sly-use.spotify='com.commons.core.models.embeddables.Spotify'>
<div class='cmp-spotify'
id='spotify-component-${spotify.audioId @ context = "attribute"}'>
<iframe allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
height="${spotify.height @ context = 'attribute'}"
loading="lazy" src="${spotify.source}"
style="border-radius:12px; border: none;"
width="100%"></iframe>
</div>
</sly>
Step 2: Create sling modal. Authors entered audio type like playlist, track, album etc and the spotify track id. Spotify domain was in externalizer. Sling modal just prepared the source url.
Step 3: Enable the spotify embeddable into component policy.
Authors can add embed component, and choose spotify as embedable and iframe loads.
Now iframe runs as blackbox, tracking or analytics wont be possible.
Custom component:
If desired to extend spotify SDK, for more custom functionalities, instead of just running player; you ll need to build a custom component and run spotify SDK as clientside javascript.
Step 1: In your template head.html, load player
`<script src="https://sdk.scdn.co/spotify-player.js"></script>`
Step 2: Create a servlet to securely fetch access_token for spotify
Step 3: Include spotify sdk into package.json of FE project
`npm install @6322565/web-api-ts-sdk --save`
Step 4: Create spotify clientlib to play upon click of run button
window.onSpotifyWebPlaybackSDKReady = () => {
const token = 'YOUR_ACCESS_TOKEN';
const player = new Spotify.Player({
name: 'Web Playback SDK Player',
getOAuthToken: cb => { cb(token); },
volume: 0.5
});
player.addListener('ready', ({ device_id }) => {
console.log('Ready with Device ID', device_id);
});
player.connect();
document.getElementById('togglePlay').onclick = function() {
player.togglePlay();
};
};
We did SDK way for Youtube, to download subtitles and add into json+ld SEO metadata. And spotify was embeddable iframe for us. But idea is same, to create custom component and a clientlib for calling SDK.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.