I’m trying to setup SoundCloud playlists on a dynamic web page, though it doesn’t seem like this is possible right now. What would be the easiest way to only show a specific playlist per dynamic page set?
I’m using Editor X.
It’s very possible to do this for any embeds within dynamic item pages but only via code, I do it with bandcamp songs and albums as well as youtube playlists, so soundcloud should be the same for a playlist or song or anything else you can embed!
This is the sort of code you want:
$w.onReady( () => {
$w(“#dynamicDataset”).onReady( () => {
const itemUrl = $w(‘#dynamicDataset’).getCurrentItem().playlist;
$w(‘#soundcloudplayer’).src = itemUrl;
} );
} );
… End of the code …
#soundcloudplayer = the name of your embedded playlist element on the page.
.playlist = the name of the field of your playlists in the database.
Use a text field with the entries in the database looking something like this:
https://soundcloud.com/whatevertheplaylisturlis
Only use the individual url part for each playlist entry, don’t include any of the playlist code such as the size and width etc, you just want the part inside the src = “”. This is the individual part that our code will change for you on each page.
Use any embedded playlist you want to on the editor page, it won’t show you the real playlist in the editor but the live page will change!
Hope that helps!
1 Like
That’s amazing, thank you!
I’ve tried following your steps, though I’m a little stuck. Here’s my code:
$w.onReady(function () {
$w(“#dynamicDataset”).onReady( () => {
const itemUrl = $w(“#dynamicDataset”).getCurrentItem().soundCloudLink;
$w($w(‘#soundcloudplayer’).src = itemUrl)
} );
});
‘.src’ is underlined red, with an error stating “Property ‘src’ does not exist on type IFrame”.
Should I put else something here instead?
Just to make sure: you are putting the code in the code section of your dynamic page and not in the html code for the playlist element?
It should look like this:
Also I just noticed It looks like this line in yours is incorrect:
$w($w(‘#soundcloudplayer’).src = itemUrl)
It should be:
$w(‘#soundcloudplayer’).src = itemUrl;
Thanks for pointing out those errors. I’ve fixed it up but I’m still receiving the same error. Is this right?
Ah, yes! It looks like you are using a Wix app rather than just a normal embed element…
I’m not sure if there is a way around this, perhaps someone else can help getting the same effect with that specific app.
If you want to try my solution you’ll have to use an ordinary iFrame embed:
And I just found this default Soundcloud code from Googling, you can change it however you want and of course your own playlists too, I presume you’d enter this same embed code into the Wix app version anyway:
That’ll work for sure, sorry I can’t help with the App version, again, perhaps someone else will know what to do or if it’s possible to get the same results with the App!
You probably already know this part but just in case here is the link on how to get the code for your playlists:
https://help.soundcloud.com/hc/en-us/articles/115003568008-Embedding-a-track-or-playlist-#:~:text=To%20get%20an%20embed%20code,from%20’Code%20%26%20preview’.
That actually worked! Well, copying the embed code directly into the embed field does, so it’s not dynamic yet. Should I copy the playlist’s embed code into my data set’s respective field (in this case 'soundCloudLink)? I did this, though it’s still empty when I’m editing and shows an error when in preview mode.
Thanks for your patience mate, I’ve only done a small bit of JS and I’m still very new to all this!
1 Like
Just use the part inside the src=“” speech marks, if you open that as a web page you’ll see that’s essentially what our embed is displaying, just within a restricted manageable shape! That’s the x factor that changes with each playlist, so our code will then take that “…” part and replace it in the embedded playlist so each dynamic page will show the correct playlist!
I also can’t remember if this will update in the preview or only in the actual live site! 
Also absolutely no worries, everything I know I know from this forum basically! 
Don’t forget, this will work with ANYTHING you can embed on an ordinary Wix site, so if you ever decided to add a YouTube playlist for each page you can use the same basic method, or an infinite number of other uses for this sort of thing!
Oh yes, you did mention that before! It all makes sense now.
Just tested it with different playlists and it works perfectly! You’re a lifesaver, thank you!
Would I be right in saying I could apply a similar mentality/logic to setting up other dynamic elements on my page? I’ll have a play around with it regardless.
1 Like
Absolutely, you should be able to use that framework on many different elements that we currently can’t connect normally via CMS!
The only issues I’ve ever had is the actual iframes can be a pain to make look nice on all breakpoints, so in general I hide stuff like YouTube playlists on the mobile versions as the proportions just don’t seem to play ball and just keep an audio player like you are using (bandcamp in my case) for the smallest size. I’m sure someone smarter than me with this stuff could figure out any in-editor design issues like that though! Have fun with it!! 
1 Like