Can you access Webflow's code to change the value of a parent div with a custom attribute in Udesly's audio player for Webflow based on a CMS field?

You cannot directly access or modify Webflow’s generated code, but you can use custom attributes and custom code to dynamically change a parent <div> value—like those required by Udesly’s audio player—based on CMS fields.

1. Use CMS Fields in Custom Attributes

• Webflow allows you to bind CMS fields to custom attributes.
• Select the audio player’s parent <div> or element, then go to Element Settings.
• Under Custom Attributes, create an attribute like data-source and set the value using Add Field → Choose your CMS audio URL field.

Example:

• Name: data-src
• Value: Add Field → Audio File URL (from your CMS)

2. Check Udesly’s Requirements for Player Initialization

• Udesly’s audio player expects certain attribute names (like data-audio, data-audio-title, etc.).
• Make sure the parent <div> includes all attributes Udesly requires, populated using CMS field bindings.

Example attributes you might need:

• data-audio: CMS audio link
• data-audio-title: Song title
• data-audio-artist: Artist field

3. (Optional) Use JavaScript for Extra Control

• If you need to manipulate values dynamically (e.g., update data attributes after page load), you can use custom JS in Page Settings → Before Body Tag.
• Use document.querySelector() or equivalent methods to target and update the correct parent element.
• Use Webflow CMS data-* attributes as selectors or data sources.

Example:

• Assign a class to your audio wrapper (e.g., audio-wrapper)
• Use JS like:
  document.querySelector('.audio-wrapper').setAttribute('data-audio', newUrlFromField);

4. Publish to See CMS Field Rendering

• Dynamic attributes bound to CMS fields only render fully on the published site, not in preview mode.
• Always publish your site to test updated values in custom attributes.

Summary

You can’t edit Webflow’s raw code, but you can set custom attributes on a parent <div> using CMS fields and use these dynamically with Udesly’s audio player. Optionally, use small JavaScript snippets to modify them after load if more flexibility is needed.