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?
TL;DR
- Bind a custom attribute (e.g., data-audiourl) from a CMS audio URL field to the parent div of the Udesly audio player.
- Use JavaScript to read this attribute and dynamically set the Udesly player’s source, ensuring it supports such updates post-render.
You cannot directly edit Webflow’s native code, but you can use custom attributes, CMS fields, and JavaScript in Webflow—in combination with Udesly’s audio player—to dynamically change a parent div’s attribute value based on CMS content.
1. Use a Custom Attribute from the CMS
- In Webflow, bind a custom attribute to a CMS field in the audio player component’s parent div.
- Select the parent element (e.g., the
<div>wrapping the audio player). - Under Element Settings, add a custom attribute (e.g.,
data-audiourl) with a value set from the CMS field that contains the audio file URL.
2. Customize Udesly Player with JavaScript
- Webflow does not allow full code-level access to plugins like Udesly’s audio player, but you can manipulate DOM elements after page load.
- Add an Embed element to the page or use the Inside
<body>tag in Page Settings. - Use JavaScript to read the CMS-bound attribute (e.g.,
data-audiourl) and apply it to the Udesly player’s expected component (such as settingsrcor updating its internal state). - Example logic:
- Detect the parent div via class or ID.
- Retrieve its
data-audiourlvalue. - Insert that value into the appropriate child component of the audio player (as expected by Udesly).
3. Ensure Udesly Player Supports Dynamic URLs
- Udesly’s audio player must support dynamic audio source paths set via attributes or JavaScript.
- Double-check Udesly’s documentation to confirm it allows manually setting the audio source via a
dataattribute or JS after render. - If it expects files to be present in a specific markup format, JS may be required to reconstruct the audio tag.
Summary
You can’t modify Webflow’s or Udesly’s base code, but you can dynamically set custom attributes in a parent div using CMS fields and modify the player behavior with JavaScript. This enables you to control Udesly’s audio player based on CMS content, as long as the player reacts properly to such custom implementations.