interactive-fretboard/README.md

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>