{"id":20596765,"url":"https://github.com/19eb/abcjs-custom","last_synced_at":"2025-09-03T00:49:45.913Z","repository":{"id":229152203,"uuid":"409839154","full_name":"19EB/abcjs-custom","owner":"19EB","description":null,"archived":false,"fork":false,"pushed_at":"2021-09-27T02:35:37.000Z","size":6017,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-17T00:52:23.781Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/19EB.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/contributing.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-09-24T05:09:44.000Z","updated_at":"2023-11-20T08:20:08.000Z","dependencies_parsed_at":"2024-03-22T10:39:57.239Z","dependency_job_id":null,"html_url":"https://github.com/19EB/abcjs-custom","commit_stats":null,"previous_names":["19eb/abcjs-custom"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19EB%2Fabcjs-custom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19EB%2Fabcjs-custom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19EB%2Fabcjs-custom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19EB%2Fabcjs-custom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/19EB","download_url":"https://codeload.github.com/19EB/abcjs-custom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242231441,"owners_count":20093636,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T08:18:31.267Z","updated_at":"2025-03-06T15:18:17.538Z","avatar_url":"https://github.com/19EB.png","language":"JavaScript","readme":"# abcjs\n\n**javascript for rendering abc music notation**\n\nThis library makes it easy to incorporate **sheet music** into your **websites**. You can also turn visible **ABC** text into sheet music on websites that you don't own using a greasemonkey script, or change your own website that contains ABC text with no other changes than the addition of one javascript file. You can also generate **MIDI files** or play them directly in your browser.\n\n## Browser/device support\n\n* The visual part of this library is supported from IE9 and newer, Safari 5.1 and newer, and all modern browsers.\n\n* The audio part of this library is much more limited: it doesn't work in IE, it only works in Safari 9 and 10, it does NOT work in Edge, but does work fine in all other modern browsers.\nNote that it takes computer resources to play the sound, so a sufficiently fast computer is needed. Research is being done to improve the performance in future versions.\n\n## **Special notes for Version 5.0.0:**\n\n### Raphael\n* The dependency on the Raphael library has been removed! This has made the minimized package 90K smaller, and has increased the speed of generating the SVG image by about 6 times!\n\nFor the most common use of creating either the sheet music or the audio, there isn't any change.\n\nHowever, if you use the animation callback in the audio to manipulate the notes, then be aware that, instead of receiving elements that are wrapped in a Raphael object, you now receive the actual\nSVG element. For the most common example of the animation functionality, the following was recommended to change the color of notes:\n```\nelement.attr({ fill: color });\n```\nThat should be changed to:\n```\nelement.setAttribute(\"fill\", color);\n```\n\n* If you do specific manipulation of the SVG, you will need to retest your code. The generated SVG, while it looks the same on the page, has changed somewhat. The selectors you use may return different results.\n\n## **Special notes for Version 4.0.0:**\n\n* **BREAKING CHANGE**: The names of all the classes that are generated are now prefixed with `abcjs-`. Any code that searched for particular class names before will have to be adjusted.\n\n* The parameters have been combined into one set of parameters, instead of three sets like previous versions. The old way of calling the parameters will still work, but you are encouraged to use the new, simplified approach going forward.\n\n## Important Resources:\n \n[abcjs Home page](https://abcjs.net) (Overview of what this library does)\n\n[Configurator](https://configurator.abcjs.net) (Experiment with all configuration options)\n\n[API Documentation](docs/api.md) (All the details about using abcjs)\n\n[Special Notes](docs/special-notes.md) (Notes from previous versions)\n\n[Info for abcjs contributors](docs/contributing.md) (Info about how abcjs is built and managed)\n\n[Support of the ABC standard](docs/abc-notation.md) (How abcjs varies from the ABC standard)\n\n[Release Notes](RELEASE.md)\n\nLicense: [The MIT License (MIT)](http://opensource.org/licenses/MIT)\n\n## Demos:\n\n| Description | Demo |\n|  ----------- | ----------- |\n| Demonstration of all configuration options | [Configurator](https://configurator.abcjs.net) |\n| Call the library from javascript, passing the abc string to it. | [Basic](https://abcjs.net/abcjs-basic.html) |\n| Transforms a textarea into an abc editor with score sheet and audio. | [Editor](https://abcjs.net/abcjs-editor.html) |\n| Adds onto an existing webpage, rendering all abc it finds. | [Plugin](https://abcjs.net/abcjs-plugin.html) |\n| Various simple demos | [examples](examples) |\n| Examples in complete Vue.js project (search for all the projects with the name in the form `vue-abcjs-****-demo`) | [GitHub](https://github.com/paulrosen) |\n\n## Which flavor should you use?\n\n### node.js\n\nIf you are in the node ecosystem, simply install the packaged version with `npm install --save abcjs`.\n\nTo import, use one of:\n```\nimport abcjs from \"abcjs\";\nimport abcjs from \"abcjs/midi\";\n```\n\nThe first is a smaller package, but does not do midi. The second is a superset of the first, **so do not load both!**\n\nTo get the styles for the MIDI control:\n```\nimport 'abcjs/abcjs-midi.css';\n```\n\n### Old-style minimized download\n\nIf you are writing significant JavaScript on your site, and you are generating the music yourself, or you are allowing the user to enter music using ABC notation, whether a whole tune or a fragment, then you probably want to use `abcjs-basic`. This gives you  control over the generation in a smaller package.\n\nIf you want to include MIDI playback, then use `abcjs-midi`. This is a superset of the basic version, so just include one or the other. It is a significantly larger package.\n\nIf you already have ABC notation on your page and don't want to modify the page more than you have to, then you can use `abcjs-plugin`, which will render all ABC that it finds on the page on page load, simply by including one line: the line to include the script. Another use of this is if you have a comment section on a blog, then you can allow users to post ABC tunes and they will appear as sheet music automatically.\n\nIf you are looking at someone else's website and see ABC on the page and want to see what it looks like in standard notation, you can install the greasemonkey script in FireFox or Chrome and it will render the ABC for you.\n\nHere are the latest versions. You can just download one of these:\n\n- [Basic](https://raw.github.com/paulrosen/abcjs/master/bin/abcjs_basic_5.1.2-min.js)\n\n- [Basic+MIDI](https://raw.github.com/paulrosen/abcjs/master/bin/abcjs_midi_5.1.2-min.js)\n\n- [Plugin](https://raw.github.com/paulrosen/abcjs/master/bin/abcjs_plugin_5.1.2-min.js)\n\n- [Greasemonkey script](https://raw.github.com/paulrosen/abcjs/master/bin/abcjs_plugin_5.1.2.user.js)\n\n- [Styles for the MIDI control](https://raw.github.com/paulrosen/abcjs/master/abcjs-midi.css)\n\n**NOTE: Do NOT link to these files directly! Upload them to your own server! [Here's why.](https://github.com/blog/1482-heads-up-nosniff-header-support-coming-to-chrome-and-firefox)**\n\n## Partial list of some websites using abcjs:\n\n| Site | Notes |\n| ------------- | ----------- |\n| https://sightreadingfactory.com | (Educational) |\n| https://www.drawthedots.com | (editor) |\n| http://www.tradzone.net/forum | (plugin) (sample page) |\n| http://abcnotation.com/forums | (plugin) (sample page) |\n| http://www.pmwiki.org/wiki/Cookbook/AbcTunebook | (plugin and editor) (this is an addon for pmwiki for creating tune books) |\n| http://www.tunepal.org | (basic) |\n| http://people.opera.com/howcome/2010/video/norway/ | (Demoed during a keynote at Google I/O 2010 by Håkon Wium Lie, CTO of Opera) |\n| http://www.bestmusicteacher.com/ | \u003e left menu \u003e music theory (Educational) |\n| http://www.eastofcleveland.com/flashcards/notereading.php | (Educational) |\n| http://tunearch.org | |\n|http://www.norbeck.nu/abc|(tune collection)|\n|http://ccm.secrice.com/|(CCM scores for playing the guitar)|\n|http://bushtraditions.wiki/tunes/|(Australian Traditional Music Tunes Archive)|\n\nLet us know if you want to be listed!\n\n**Great big thanks to [mudcube](https://github.com/mudcube/MIDI.js) for the excellent work on midi.js!**\n\n## Supported by BrowserStack\nIf you aren't using the same browser and machine that I use, you can thank [BrowserStack](https://browserstack.com/) for their support of this open-source project.\n\n![BrowserStack](https://cdn.rawgit.com/paulrosen/abcjs/master/docs/browserstack-logo-600x315.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F19eb%2Fabcjs-custom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F19eb%2Fabcjs-custom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F19eb%2Fabcjs-custom/lists"}