Linking custom attributes to a CMS field?

Design help Custom code
1

Hey y’all!

I recently purchased and am using Udesly’s audio player for Webflow. So far, I’m really enjoying the product, but have run into an “issue.” My client (an audio production company) would love to, in the editor, change an audio player’s audio. While that’s not immediately possible, I think I might’ve thought of a work-around, but can’t seem to figure out exactly how it might work.

Udesly’s audio player is built inside a parent div with the custom attribute name: “udesly-audio-player” and value: “audio url.”

Here’s my question: Is there a way to access the code “behind the scenes” to change that div’s value based on a CMS field? I know that you can link to CMS fields in an embed, but don’t know how to access Webflow’s code.

I feel like this thread is getting close: Custom Attribute "Value"

Apologies if this was a bit of a scattered question - it’s a bit scattered in my mind and I’m a bit new to coding and Webflow. I appreciate your help :slight_smile:

2

Hey man,

If you can move that custom attribute inside of an embed then you can defs manage it with the CMS, but I’m not exactly sure how possible that is. Hopefully someone can chime in around that.

If its in an embed you can just add a CMS filed that pulls from the CMS to fill a specific line. For example this code I’ve used here, the CMS addfield fills the parts of the code that are unique from the CMS. In your case the CMS could fill the value audio URL part from the CMS.

image
image1633×642 70.2 KB

I know Udesly has a pretty popular facebook group, I’d recommend jumping in there with this post and you’ll probably get a better answer.

Sorry I can’t help more man

3

My thoughts exactly!

From what it looks like in this screenshot from the post I linked, it’s possible to access Webflow via Javascript? I just don’t know how to access a div’s custom attribute’s.

02%20PM
02%20PM1554×960 109 KB

4

Follow up!

So, if I plug the following code into an embed in a div with class name “box,” it turns the box red!

document.getElementsByClassName(“box”)[0].setAttribute(“style”, “background-color: red”);

But when I put the embed into the audio player div block with this code:

document.getElementsByClassName(“AudioPlayerSingleTrackWrapper”)[0].setAttribute(“udesly-audio-player”, “https://s3.amazonaws.com/murrvox-audio/Featured_1.mp3”);

It doesn’t seem to link up. Why is it that I can add the attribute “background-color” to a div block, but not achieve what Webflow does here?
40%20PM

5

Hey @MattDAndre,

I had the same problem and found the solution. Add a ID to the Udesly Audio Player Wrapper corresponding with the code below and put it before your “/body” tag.

<script>
var anchor = document.getElementById("audio-player-single-track-wrapper");
var att = document.createAttribute("udesly-audio-player");
att.value = "INSERT URL HERE";
anchor.setAttributeNode(att);
</script>
2 Likes
6

Thank you for this, this is perfect! :pray::smile: