tuner.coffee is a JavaScript implementation of a chromatic tuner using getUserMedia and the Web Audio API, written in CoffeeScript!
tuner.coffee aims to provide an accurate, real-time chromatic tuner, that can easily be dropped into any website. It uses modern browser features like the Web Audio API and the getUserMedia function to listen with the user's microphone and find the nearest pitch in real-time.
Easy! Just grab the JS & CSS files from the github repo and include them in your page as follows:
<link rel='stylesheet' type='text/css' href='tuner.css'/>
<script type='text/javascript' src='tuner.min.js'></script>
This will create a global Tuner function, which takes 2 arguments:
-
containerSelector- the CSS selector for the element to place the tuner in. (Defaults to'#Tuner') -
theme- the CSS class of the theme to add to the tuner, current options are'dark'or'light'. (Defaults to'light')
You need to call the function in your own JS file - or just directly on the page:
<script>
Tuner('.mySelector', 'dark');
</script>
This will create the tuner in your page, and ask the user for permission to use their microphone.
You can also destroy the Tuner (and remove the contents of the element that it was created in) by calling:
<script>
Tuner.destroy();
</script>
It can be seen in action here.
Currently tested and working in latest Chrome (both Desktop and Android), and the latest Firefox.