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?
- Bind a CMS audio field to a custom attribute (e.g.,
data-audio-src) on the parent<div>of the audio player in Webflow. - Use JavaScript to read that attribute and dynamically set or update the Udesly player’s source on page load.
- Ensure compatibility by checking if the Udesly player needs to be re-initialized after setting the new source.
You cannot directly access or modify Webflow's core code, but you can use custom attributes, CMS bindings, and custom JavaScript to dynamically change a parent <div> value (e.g., attribute, content) when using Udesly’s audio player or any custom integration.
1. Bind CMS Field to a Custom Attribute
- In the Webflow Designer, select the parent
<div>of the audio player. - In the Element Settings panel, add a custom attribute like:
- Name:
data-audio-src - Value: Select the CMS field (e.g., Audio Link or File URL) dynamically from the CMS.
2. Use JavaScript to Modify the Element at Runtime
- Add an Embed element inside the page or in the page settings under “Before </body>” section.
- Use JavaScript to extract the CMS-based value from the
data-audio-srcattribute of the parent and apply it to the Udesly audio player.
Example logic:
- On document load, use JavaScript to find each
.audio-player-wrapperor similar class. - Read the
data-audio-srcattribute. - Update the player source or relevant config.
Example (simplified JavaScript):
const divs = document.querySelectorAll('[data-audio-src]'); divs.forEach(div => { const audioSrc = div.getAttribute('data-audio-src'); / apply to Udesly player inside div / });
Note: Avoid writing inline audio <script> tags; Webflow may strip certain tags or break functionality.
3. Ensure Compatibility with Udesly Player
- Make sure the Udesly player component supports dynamic loading via JS.
- You may need to trigger a re-init function of the Udesly player script after dynamically setting the new value, if required by their documentation.
Summary
You can’t modify Webflow’s internal code, but you can bind a CMS field to a custom attribute on the parent <div>, then use custom JavaScript to apply that value to the Udesly audio player logic. This allows dynamic audio content per CMS item using Webflow and Udesly.
