Audio embed with dynamic link data

Hey, I’m trying to embed audio with the audio being linked from an Airtable database. The HTML video works, but with some issues. I wonder how I should format the dynamic data (currentItem.audio[0].url) so it gets converted to a link? Sorry for the basic question, I’m not a developer.

<audio controls preload="metadata">
  <source src="currentItem.audio[0].url" type="audio/mpeg" />
</audio>

Hi, if you just want a link, you can insert a link element, and in the right side bar set its destination prop to a dynamic value that is referencing the URL from airtable. Is that what you mean?

Hey Yang, thanks for replying. I’m looking for a way to have the audio file there being able to be played on the website, like how the HTML video component does, but as an

Got it, there isn’t a built-in audio component that you can just insert, but you can register your own code component for this, though you need to set up your code base for this: Registering your code components | Learn Plasmic

Another option is to

  1. insert a custom HTML embed component.
  2. From the right side bar, use a dynamic value on the code prop
  3. Switch to code editor and paste the following:
`<audio controls preload="metadata">
  <source src="${currentItem.audio[0].url}" type="audio/mpeg" />
</audio>`

Let me know if that helps.

Thank you, your modified code worked beautifully!

I’m also trying to add a textarea next to the embedded audio, which loads the text value from Airtable (this works well already), but I’m trying to find a way to update the Airtable data when the text is modified in the textarea (on the published site).

I added an “On change” interaction to the textarea to “Update row” in Airtable, but I’m not sure how to call the value from the actual textarea as the data to use for the update. I hope I’m explaining well what I mean.

(The embedded audio with the textarea is a repeated element listing all the audio entries from Airtable.)