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 @spotify/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.
