HTML5 Guitar Chord Finder (Beta) Released

GuitarChords.JS is the result of a fun experiment with CSS3, HTML5 and JavaScript that eventually went crazy with the ability to play the selected chord (no Flash, but real HTML5 audio), chord inversions and types and cool real-life stompbox interface with customizable LED display, knobs, buttons and large play button.

And this is just the Beta release! Even more to come in the official release soon.

BETA Release Features:

• Ability to play the current chord from small external .mp3 or .ogg sounds (no Flash, but real HTML5 audio) depending on the browser support.
• Cool and friendly stompbox-like interface with LED display, knobs and large play button.
• Chord data is stored in easy to understand json file(s) that can be easily edited.
• User-defined chords data files.
• User-defined chord types.
• Any chord can be added and played.
• Sounds are loaded on demand.
• Incredibly small footprint.
• Ability to display 3 inversions for each chord.
• Customizable backlit color of the LED display.
• Fully localizable.
• Easy to install, setup and use on any standards-compliant website.
• Fully AJAX driven.

Planned Features for the Official Release

• Support for multiple chord data files that can be changed on the fly.
• Add more chords and inversions.
• Add flat and sharp variants of the current chord.
• All sounds will be embedded as base64-encoded data in a cacheable json file.
• Convenient tuner.
• Volume control.
• Continuous chord playing.
• Highlighting of the currently played note.
• UI improvements.
• Export of the current chord in text format.

Supported Browsers:

• Internet Explorer 9+
• Mozilla Firefox
• Google Chrome
• Apple Safari
• Opera

GuitarChords.JS does not initialize on older versions of Internet Explorer.

Technologies Used:

JavaScript, CSS3, HTML5 Audio, JSON and SVG. SVG has been used in Internet Explorer to achieve consistent gradients instead of using the classic filter gradient that bleeds through on elements with rounded borders.

Requirements:

• Standards-compliant webpage (XHTML, HTML5) or optionally Skinny DTD. GuitarChords.JS will not initialize on pages with non-standards compliant DTDs and will display a warning.
• Web server.

Screenshots

Visit the info page for GuitarChords.JS, view the demo or download it straight away. The component is included in the latest version of Acid.JS Web UI too.