Tuner

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>