Features
- Responsive tuner listens to you play
- Works with any instrument
- Notes from 27.5 Hz to 4186.01 Hz
- Embeddable in any webpage
- Customizable size, color and text
- No Java applets
- Uses HTML 5 Web Audio API
- SVG Graphics
- One 7.2 KB (2.7 KB compressed) JavaScript file
Embed
Add a customized tuner to your own website with just two lines of html markup. Just copy and paste the following two lines of markup into your website code for the default display.
<div class="tuner-embed"></div>
<script src="https://www.tunelessons.com/tuner.js"></script>
Channel Link
If you'd like the link in the bottom right of the tuner to point to a specific channel on TuneLessons.com, add the data-channel-title
and data-channel-id
attributes.
<div class="tuner-embed"
data-channel-title="JustinGuitar Songs"
data-channel-id="UCcZd_G62wtsCXd-b7OhQdlw"></div>
<script src="https://www.tunelessons.com/tuner.js"></script>
Fully Customized
Color, size and text customizations are accomplished by adding data-*
attributes to the class="tuner-embed"
element.
<div class="tuner-embed"
data-width="200"
data-height="65"
data-padding="10"
data-bars="9"
data-bar-height="20"
data-bar-spacing="2"
data-bg="#eee"
data-opacity="0.8"
data-font-size="14"
data-font-color="#333"
data-text-start="𝄞 Tune Your Guitar"
data-red="#C00"
data-yellow="#CC0"
data-green="#0C0"></div>
<script src="https://www.tunelessons.com/tuner.js"></script>
Multiple Tuners
If embedding multiple tuners on a page, you only need to add the JavaScript file once.
<span class="tuner-embed"></span> <span class="tuner-embed"></span>
<script src="https://www.tunelessons.com/tuner.js"></script>