|
|
|
|
@ -7,3 +7,17 @@ It was cobbled together from the following projects, so huge thanks to them:
|
|
|
|
|
- https://github.com/KCarlile/guitar-diagrams-js - Drawing a customizable fretboard
|
|
|
|
|
- https://tonejs.github.io/ - Playing audio
|
|
|
|
|
- https://github.com/nbrosowsky/tonejs-instruments - Guitar sound samples
|
|
|
|
|
|
|
|
|
|
It is defined as a web component, so you can use it by including `guitar-diagrams-web-component.mjs` and using the component.
|
|
|
|
|
|
|
|
|
|
### Example
|
|
|
|
|
```html
|
|
|
|
|
|
|
|
|
|
<script type="module" src="js/src/guitar-diagrams-web-component.mjs"></script>
|
|
|
|
|
|
|
|
|
|
<my-fretboard canvas-id="myCanvas" orient-horizontally="true" fret-count="6" scale-factor="1">
|
|
|
|
|
<marker string="4" fret="2"></marker>
|
|
|
|
|
<marker string="3" fret="2"></marker>
|
|
|
|
|
<marker string="2" fret="2"></marker>
|
|
|
|
|
</my-fretboard>
|
|
|
|
|
```
|
|
|
|
|
|
