Audio embed on my app from a link in my field

Howzit. I am looking at embedding Audio from a link into my knack app. I am quite new to Developing with Knack and I haven’t added custom code to my app before.

Here’s how I want to set it up. let’s see if I can, I want my code in one field, what code? my Audio player code. and then have my code field pull the link from my Audio link field. is this doable? I have been able to do it as an Iframe. but that’s not my desired outcome. the reason I want to do it this way is because I am adding unic links for every record and I want it to be dynamic so I don’t have to mainly do the embed code for every link of Audio.

I am doing this with Video to but an iframe is actually viable.

thanks appreciate the feed back.

Hello Rehyan,

Yes, it’s possible and we can do it easily. Check on below page where you can upload a mp3 file.

https://roberts.knack.com/farmers#sound-test/

$(document).on(‘knack-view-render.view_xyz’, function (event, view, records) {
var rcds=Knack.views[“view_xyz”].model.data.models;
for(var x=0;x<rcds.length;x++)
{
var url = rcds.attributes.field_abc_raw.url;
var id= rcds.attributes.id;
$(“tr[id=”+id+“] .field_abc”).html(‘’);
}
});

Thanks,
Sunny Singla
ssingla1985@gmail.com
+919855089359

Hi Sunny, I appreciate the response I noticed that you are doing this with a file that is being uploaded to Knack itself, I want to host my Audio files on AWS S3 or Wasabi. this is part of the reason why I am using the link.

is this solution still Viable while hosting is not on knack?

and is your code in the JS panel in Settings? or in the field it’s self?

It’s in JS

If you are storing file in AWS then it’s simple. No need to put any JS I will make a Chnage and let you know

Still we need Javascript as Knack removed some feature to add html tags in field.

check it now on same url …

$(document).on(‘knack-view-render.view_193’, function (event, view, records) {

var rcds=Knack.views[“view_193”].model.data.models;

for(var x=0;x<rcds.length;x++)

{

var url = rcds.attributes.field_461;

var id= rcds.attributes.id;

$(“tr[id=”+id+“] .field_461”).html(‘’);

}

});

howzit. I haven’t been able to get it running, I think I might be missing something
here’s the code you gave me, in my JS section.

I am using a link Field that’s 157, and my view is 3. as you would see in the image. but it doesn’t change anything.

here’s the link to my view. where I want to display the Audio player Knack

Let me know if I need to change anything in my fields or my code. I see a lot of red in my code which is concerning for me but I assume because it works by you it shouldn’t be a problem on my side.

if I want to display the Audio player in more then one view how would we do that?

I apologize for any ignorance on my side

Sorry for replying late. But when we post here double quote change. Can you replace all double quotes?

also after reds there is an x in square brackets which is also removed while copying and pasting…

I’m going to add a screenshot.

Thanks,
Sunny Singla

Hi Sunny. Thanks for the Screen shot really cleared everything up for me. I got the following error on Models.


not sure why I am busy researching it, to solve it.

Thanks for all the help.
Reyhan

Maybe this view doesn’t contain data that’s why.

Or check viewId .

If all is right then share me the view

Thanks,
Sunny Singla

Here’s a screenshot of my code.


as it should be. and here’s a link to my live app https://heritageoffaithmin.knack.com/messagedb#message-overview/view-message-details/66420b7422ddfc264c87ef66/
I am not sure if you are looking for more.

I am new to Knack so am not sure how what you. mean by the view not containing the data. but the link is in the view and record so it should all be there?

Hello,

You are using a detail view so the code is below

Thanks,
Sunny Singla

And i tried directly adding into console and it’s works

I Don’t Understand :see_no_evil: what should I? or change.

Convert that attached screenshot into text

Or share your app at ssingla1985@gmail.com

I will add that code there

ssingla1985@gmail.com

Thank you, Sunny! it’s working, You’re amazing! Could you provide a brief explanation of everything that happened and the code we used? I’d like to understand it better and learn from this experience as much as possible.

Thanks
Reyhan

Hello Reyhan,

It’s simple I just check the element in the console and apply JS.

Thanks,
Sunny Singla