# ABCjs music notation library

**URL:** <https://discourse.processing.org/t/abcjs-music-notation-library/30635>\
**Category:** Libraries\
**Created:** [June 10, 2021, 6:59pm UTC](https://discourse.processing.org/t/abcjs-music-notation-library/30635 "2021-06-10T18:59:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![patricio1979](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/patricio1979/32/13609_2.png) [@patricio1979](https://discourse.processing.org/u/patricio1979)\
**Post date:** [June 10, 2021, 6:59pm UTC](https://discourse.processing.org/t/abcjs-music-notation-library/30635/1 "2021-06-10T18:59:26Z")

</div>

Hello, how can I port this [https://www.abcjs.net/](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

```auto
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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 10, 2021, 7:34pm UTC](https://discourse.processing.org/t/abcjs-music-notation-library/30635/2 "2021-06-10T19:34:16Z")

</div>

Check this out

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

---

<div class="post-metadata">

**Author:** ![patricio1979](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/patricio1979/32/13609_2.png) [@patricio1979](https://discourse.processing.org/u/patricio1979)\
**Post date:** [June 10, 2021, 8:53pm UTC](https://discourse.processing.org/t/abcjs-music-notation-library/30635/3 "2021-06-10T20:53:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![patricio1979](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/patricio1979/32/13609_2.png) [@patricio1979](https://discourse.processing.org/u/patricio1979)\
**Post date:** [June 10, 2021, 11:39pm UTC](https://discourse.processing.org/t/abcjs-music-notation-library/30635/4 "2021-06-10T23:39:11Z")

</div>

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

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

Thanks

---

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [June 11, 2021, 8:39am UTC](https://discourse.processing.org/t/abcjs-music-notation-library/30635/5 "2021-06-11T08:39:32Z")

</div>

You typically import libraries in your index.html file.

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

```

See more on libraries here: [libraries | p5.js](https://p5js.org/libraries/)