Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kernix13/chordy-svg
https://github.com/kernix13/chordy-svg
Last synced: 4 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/kernix13/chordy-svg
- Owner: Kernix13
- License: mit
- Created: 2021-12-26T02:43:08.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T06:42:01.000Z (almost 2 years ago)
- Last Synced: 2023-03-05T11:23:32.942Z (over 1 year ago)
- Language: JavaScript
- Size: 849 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# chordy-svg
Node JS module for generating guitar chord diagrams in SVG format. Interval names are shown inside the dotted positions.
 
A `` element is written which contains the notes of the chord. This in turn can later be used by the user for audio previews etc.
```xml
C3:G3:B3:E4:G4
8:15:19:24:27
```
The [GitHub page](https://github.com/andygock/chordy-svg) may contain more up to date code than the NPM release. Please check GitHub for the most recent updates.
It uses:
- [SVG.js](http://svgjs.com/) for SVG manipulation.
- [svgdom](https://github.com/svgdotjs/svgdom) to allow SVG.js to run server-side.
- [tonal](https://github.com/danigb/tonal) music theory library for determining the notes and intervals of defined chords.
## Demo
You can see this library being used at
## Installation
With npm
npm install chordy-svg --save
## Examples
### Node Example
Create a node application `test.js`. This will create a SVG diagram and write the contents to stdout.
```js
const ChordySvg = require("chordy-svg");
const voicing = {
name: "Cmaj7",
shape: "x35453",
root: 2,
comment: "",
};
const svg = new ChordySvg(voicing);
const data = svg.svg();
process.stdout.write(data);
```
If you've cloned the library from GitHub instead of using NPM, you'll need to replace `require('chordy-svg')` with the correct path, e.g `require('./chordy-svg')`
Create SVG and write to new file `output.svg`
node test.js > output.svg
### Browser Example
`chordy-svg.js` is found in `dist/` and can be built with `npm build`.
```html
// create new svg diagram
var element = document.getElementById("image");
var svg = new ChordySvg({ name: "Cmaj7", shape: "x35453", root: 2, comment: "Test comment" }, { target: element });
```
## Input
In the example above, we used:
```js
const voicing = {
name: "Cmaj7",
shape: "x35453",
root: 2,
comment: "",
};
```
The properties for this object are:
- `name` is the name of the chord and will be displayed as a title in the SVG
- `shape` is the shape of the chord, starting from the lowest / thickest string.
- `x`: muted or skipped string.
- `0`: open string (open strings not properly tested yet)
- `[0-9a-f]`: hexadecimal value refers to fret position. e.g `b` refers to fret position `11`. Only up to fret position `15` (hex `f`) is permitted.
- `root` is the root string. `0` refers to the lowest frequency / thickest string. On 6 string guitars with EADGBE tuning, `5` refers to the high E string. In the generated diagram, the dot for this position will be coloured red by default.
A second parameter to the `ChordySvg()` constructor may be used to set more custom parameters (documentation not complete yet).
## Development and Testing
For development and building from source, clone Git repo
git clone https://github.com/andygock/chordy-svg
cd chordy-svg
Run babel script which watches input file and writes to `test/dist/chordy-svg.js`
npm run start
You can view live updated output of browser with browser-sync
npm run serve:start
You can run further tests with Mocha for plain Node usage (this uses `dist/chordy-svg.js`).
npm run mocha
You can view live updated directory listing of mocha test output with.
npm run serve:mocha
The `serve:*` scripts are usually done concurrently with the `start` or `mocha` scripts.
Once all is tested well, build to `dist/chordy-svg.js`, ready for publishing to npm.
npm run build
Run `npm run clean` to delete all built files and generated SVG images from `test/dist/`, `test/output/` and `dist/`
## Notes
Not fully tested for chords with open strings.
### Testing
Testing to see if I have to do anything other than `git push' for a repo I cloned.