How to Connect HTML iframe to database to show Soundcloud on Dynamic Page

Ask the community
,
1

I am trying to connect the HTML iframe element to my database on the dynamic page. I have looked at earlier solutions in the discussions, but have run into a new problem that I cannot find the answer to.

2862×1434 337 KB

This is what I have so far. All of the text and buttons are connected to the Composers database. I have found some code that seems to work for the #html1 element:

$w.onReady(()=>{
    $w("#dynamicDataset").onReady(()=> {
 const itemUrl = $w('#dynamicDataset').getCurrentItem().recording
        $w('#html1').src = itemUrl
    });
});

but whenever I preview the issue, this is what I see:

1910×990 20.5 KB

Right now, the soundcloud url is https:// soundcloud. com/ brendan jacklin/hbeart-niloufar-nourbakhsh, drawing from the recording field in the database (set to url) and I have no idea why it is showing that.

If it is not possible to work with urls, is there a way to do it directly from the embed code on the Soundcloud player?

1 Like
2

Hey Brendan,

If the URL isn’t working you should be able to use the embed code instead but you will have to use the postMessage() function as the src value will only allow URLs.

You should find the following article helpful, skip down to the messaging section.

Corvid: Working with the HTML Element

Hope this helps!

Dara | Corvid Team

3

Hi Dara,

Thanks for the link. I did try to get the postMessage() to work, but I’m pretty sure I did something wrong.

I tried to get the embed code from the dynamicDatabase on the page and I changed the click event to a viewport enter event, but right now it is just not displaying anything.

Currently I have this for my Wix code:

import wixData from 'wix-data';

$w.onReady(function () {
  $w("#html1").onMessage( (event) => {
    console.log(`Message received by page code: ${event.data}`);
  } );
} );

export function html1_viewportEnter(event) {
    $w("#html1").postMessage($w("#dynamicDataset").getCurrentItem("embed"));
}

where embed is the name of the field with the embed codes in my database.

I have tried changing various things, but cannot get it to work.

4

It’s not that your code is wrong, Sound Cloud simply does not allow embedding via URL. They want you to use their source code because they collect data for analytical purposes.

Unfortunately, you cannot change the iFrame code dynamically. You would have to physically embed each iFrame individually and/or embed the playlist individually.

Now they do have API documentation that you may or may not want to research to see if you can find a different way to reach your project goals.
Link: https://developers.soundcloud.com/docs/api/#playing

(Gorgeous music by the way. I am listening to it as I code ---- and it is so moving.)

5

Thanks - I was worried it was something like that. I’ll just need to come up with a work around.

Good thing music is my day job and not coding, haha.

6

@brendanjacklin Hi Brendan, Did you find a work around? We have the same problem…