dc6acbe3853c293729ef9ee3e01509dcc9f3dede
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%