ABCjs music notation library

p5.js Libraries
1

Hello, how can I port this https://www.abcjs.net/ libraryto p5js? It is useful for importing ABC music files (there’s a corpus for musicology research).

In the index.html
<script src="abcjs-basic-min.js" type="text/javascript"></script>
But in the documentation it says that a
<div id="target"></div>
is needed. I assume that with an createGraphics() will satisfy that requirement.

In my js file I have

let a;
let abcString = "X:1\nT:Example\nK:Bb\nBcde|\n";

function setup() {
  createCanvas(400, 400);
  a = createGraphics(400, 400);
}

function draw() {
  background(40);
  console.log(abcjs.signature);
  noLoop();
  a.background(100);
  a.noStroke();
  renderAbc(a, abcString);
}

But the console returns: Uncaught ReferenceError: abcjs is not defined
I’m thinking that the abcjs-basic-min.js library is not sef-contained…

Someone has experience with this type of libraries?

2

Check this out

https://paulrosen.github.io/abcjs/overview/getting-started.html#old-style-minimized-download

3

Sorry, I don’t see anything that I haven’t try already. Did you saw something I missed?

4

Hey, by the way. Where do you import a library in p5js

Where do I put this line?
import abcjs from "abcjs";

Thanks

1 Like
5

You typically import libraries in your index.html file.

<script src="/whateversubfolder/abcjs-basic.js" type="text/javascript"></script>

See more on libraries here: libraries | p5.js

1 Like