812a08c051e7931930f2f053e1ccb04f5728b858
Guitar Fretboard
This is a testing project to render an interactive guitar fretboard, with the ability to define markers to play specific notes.
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
<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>
Description
Languages
JavaScript
100%