Render abc music notation via js library?

[Tom_Parent]

Hello,

I use Airtable to organize the list of traditional folk tunes I play on my fiddle.

As well as the typical tune metadata (name, style, key, composer, etc.), I paste in a PNG of the music score and a “snippet” of the first couple bars.

I’d like to instead have the music rendered in a cell using abcjs that references another cell that has the raw abc music notation.

Looking at library documentation, seems like this should be an easy thing to do(?), but I’m not much of a programmer. Does anyone want to take a stab at this “for fun”? :grimacing: I’d appreciate any tips to get me started; I’m eager to improve my coding skills and could use this project as a vehicle.

Thanks!

Tom

[kuovonne]

This looks like a really fun base.

ABC music notation and the abc.js library are really useful. Unfortunately, the issue is how to store and display the information in Airtable. The abc.js library is designed to render the notes in a webpage, and it needs access to the DOM. When a script is run in scripting app, there is no access to the DOM. It might be possible to create a custom app that uses the abc.js library, but creating a custom app is far more work than creating a script.

[Tom_Parent]

Thanks for the thoughts @kuovonne. I guess another strategy, instead of natively rendering, is to push abc elsewhere, render, create image files, then import into Airtable. I saw some Airtable code examples where an html target was auto imported like: URL to Attachment