Play Spotify from within salesforce using LWC

As long as the playlist is public, no authentication is needed.

html code:

<template>
<div class="iframe-container slds-align_absolute-center"></div>
<div class="container">
<div class="slds-align_absolute-center"
style=" background: linear-gradient(164deg, rgba(212,241,244,1) 26%, rgba(12,13,14,1) 44%, rgba(102,196,250,1) 95%);">
<lightning-layout>
<lightning-layout-item padding="around-small" class="custom-box">
<iframe style="border-radius:12px" src={url} width="100%" height="600" allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
</lightning-layout-item>
</lightning-layout>
</div>
</div>
</template>

Now this is to create an iframe and play the Spotify playlist in that iframe

the JS code:

import { LightningElement} from 'lwc';
export default class SpotifyIframe extends LightningElement {
 url = 'https://open.spotify.com/embed/playlist/0iepisLXvVe5RxB3owHjlj?utm_source=generator';
// this will be the link to your desired playlist
}

Now you can add this LWC component either to an app page or to a custom tab.

Note: for best practices you can store the url in a custom label and add import that label and use it instead of hardcoding the url of the playlist.

That’s it , now you’re all set to play your favorite songs !