%% generate tags start %%
#software-engineering
%% generate tags end %%
#software-engineering/music #music
This library is for a _web designer_ or a _web programmer_ who wants to display _standard music notation_ on their website. It can also be used for generating MIDI in the browser.
## ABCjs
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://www.abcjs.net/#what")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://www.abcjs.net/#what" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">abcjs: Javascript Music Library</div>
<div class="nifty-link-card-description">abcjs allows web designers and programmers to add sheet music and audio to their websites using the ABC music notation standard and a tiny amount of JavaScript. The music can be animated and can be dynamically created.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://www.abcjs.net/favicon.ico">
https://www.abcjs.net/#what
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://abcjs.net/abcjs-fb.png')">
</div>
</div>
</a>
</div>
%% run end %%
## Open Sheet Music Display
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/opensheetmusicdisplay/opensheetmusicdisplay")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/opensheetmusicdisplay/opensheetmusicdisplay" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - opensheetmusicdisplay/opensheetmusicdisplay: OpenSheetMusicDisplay renders sheet music in MusicXML format in your web browser based on VexFlow. OSMD is brought to you by PhonicScore.com.</div>
<div class="nifty-link-card-description">OpenSheetMusicDisplay renders sheet music in MusicXML format in your web browser based on VexFlow. OSMD is brought to you by PhonicScore.com. - GitHub - opensheetmusicdisplay/opensheetmusicdisplay:...</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/opensheetmusicdisplay/opensheetmusicdisplay
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/cdb3e6942b3e331647a58fd004b99c2317d82b89ba6a2353263c3e1b12b00ef9/opensheetmusicdisplay/opensheetmusicdisplay')">
</div>
</div>
</a>
</div>
%% run end %%
## Musescore
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/musescore/MuseScore")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/musescore/MuseScore" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - musescore/MuseScore: MuseScore is an open source and free music notation software. For support, contribution, bug reports, visit MuseScore.org. Fork and make pull requests!</div>
<div class="nifty-link-card-description">MuseScore is an open source and free music notation software. For support, contribution, bug reports, visit MuseScore.org. Fork and make pull requests! - GitHub - musescore/MuseScore: MuseScore is ...</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/musescore/MuseScore
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/3efea8480e3da861f9692217e76474b462a515d33f1361730962b3d2444f5c1c/musescore/MuseScore')">
</div>
</div>
</a>
</div>
%% run end %%
## Alpha Tab
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/CoderLine/alphaTab")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/CoderLine/alphaTab" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - CoderLine/alphaTab: alphaTab is a cross platform music notation and guitar tablature rendering library.</div>
<div class="nifty-link-card-description">alphaTab is a cross platform music notation and guitar tablature rendering library. - GitHub - CoderLine/alphaTab: alphaTab is a cross platform music notation and guitar tablature rendering library.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/CoderLine/alphaTab
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://repository-images.githubusercontent.com/1491192/0376c980-c7a1-11ea-86af-11ce75ddcb47')">
</div>
</div>
</a>
</div>
%% run end %%
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://www.alphatab.net/")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://www.alphatab.net/" target="_blank">
<div class="nifty-link-card-text" style="width: 100%;">
<div class="nifty-link-card-title line-clamp-2">Build modern music notation apps for web, desktop and mobile | alphaTab</div>
<div class="nifty-link-card-description">Build modern music notation apps for web, desktop and mobile</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://www.alphatab.net/img/favicon.ico">
https://www.alphatab.net/
</div>
</div>
</a>
</div>
%% run end %%