An interactive guitar fretboard Javascript module. Defined as a Web Component.
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
Aadhavan Srinivasan dc6acbe385 Two new attributes: center-align will align the fretboard horizontally to the center (it'll try, atleast); show-chord will show (or hide) the 'play chord' button 1 day ago
js Two new attributes: center-align will align the fretboard horizontally to the center (it'll try, atleast); show-chord will show (or hide) the 'play chord' button 1 day ago
samples Added sound samples 2 days ago
README.md Updated README 2 days ago

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:

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>