Audio Preview Scripting Block

[Tyler_Emel]

I have a table with an audio preview attachment as a field and I am trying to use the scripting block to get this field for a record. I can display the URL for a giving record with the code below but I am wondering if there is a way to be able to preview it from the scripting block, maybe with an audio player even? Any help would be greatly appreciated!

let table = base.getTable('Music Collaborations');
let view = await input.viewAsync('Sort By', table);

if (view.name == 'All Songs')
{
    let query = await table.selectRecordsAsync();
    output.text('All Songs Selected');
}else if (view.name == '5 Star Songs')
{
    let query = await view.selectRecordsAsync();
    output.inspect(query.records.length);    
    output.table(query.records[3].getCellValue('Audio Preview'));
}

[Bill_French]

Hi Tyler, and welcome to the community!

Tyler_Emel:

wondering if there is a way to be able to preview it from the scripting block, maybe with an audio player even?

Yeah, this would be pretty cool, but you have a few hurdles in the way.

If audio attachments actually play when you click on the attachment document in the UI (and I want to be clear - I’m not certain they won’t) you could simply grab the audio file’s URL and present it as a link in the Script Block using output.markdown(). The script for this is a bit tricky as well, but certainly proven in a few threads here in the community like this one.

Attachment fields are arrays containing the name, URL (as it is stored in Airtable’s CDN), and some other attributes like size, etc. Retrieving that URL to Airtable’s copy of the audio file is performed easily in the script block code like any other array field.

[ScottWorld]

Hi @Tyler_Emel,

Instead of using the scripting block, you might benefit from using this extension:

Audio Player for Airtable Attachments

miniExtensions

Audio Player For Airtable Attachments - miniExtensions

Play video attachments directly in the browser without having to download them to your computer. This tool also generates unique links that can be shared.

[Tyler_Emel]

Hi Bill, and thanks for the welcome and the reply!

I followed what you had suggested and had some success but hit a couple of the hurdles you were talking about. I was able to get the URL for an attachment using these two lines.

let query = await view.selectRecordsAsync();
output.markdown(query.records[2].getCellValue('Audio Preview')[0].url);

It’s weird, what looks to be an audio player pops up but it cannot play the audio file and the play button and timeline are grayed out. I can even download the audio file from this screen by right clicking and “saving as” so I know the URL is correct and the audio file is there. It’s almost as if the player isn’t connected to the audio file on this URL or something. This seems possible but I must be missing something, do you have any ideas? Thanks as always and I appreciate all the help!

[Bill_French]

Tyler_Emel:

query.records[2].getCellValue('Audio Preview')[0].url

This is simply going to jam a URL into a Markdown render, and that probably won’t be enough to compel the browser to take the actions you expect.

Consider creating an actual Markdown link inside the Markdown Output method like this:

[cnn.com](http://cnn.com)

[Tyler_Emel]

Ok I believe I have adjusted to the correct format for a markdown link. Just to work out the player issue I have tried to add the URL that I know contains the audio preview as the link instead of getting it through the getCellValue() that I did above. I can still get the page to recognize there is audio and it shows a player but I have not had success playing the audio attachment from the player that is provided. I have added the code below with the link in case it would help to see the URL that the markdown is directed to. Thanks!

let markdownLink1 = `[I'm an inline-style link](https://dl.airtable.com/.attachments/27872622e095bdea6b4f21867508b2f4/cc432472/20200429_WhoKnows.mp3)`;
output.markdown(markdownLink1);

[Tyler_Emel]

Ok I have veered off a bit and completed what I was trying to do in a custom block instead of a scripting block. I believe I could do it in a scripting block still but with my pretty basic knowledge I found it easier to use the Howler js library inside a custom block because I could not get a proper audio preview from my browser. I have uploaded the project here and I am aware that it is pretty sloppy so I am open to any suggestions on how to run things cleaner as I’m still a beginner. I have shared an example base in case anyone wants to run the code on a base here. Thanks for anyone who takes the time and I hope to bounce some ideas back and forth.

[Bill_French]

Tyler_Emel:

Howler js library inside a custom block

Yep - this looks like a good choice. It probably could be used inside a script block since the minified library is only 35k.

But, Custom Blocks are far easier on the eyes, so go with that.