Tone generator

generate tones and play with frequencies

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<label for="freq">hz</label>
<input type="number" id="freq" value="2600" />
<button id="start">start please</button>
<button id="stop">stop all</button>
<div class="volume"></div>
<div id="tones"></div>


<script id="tone-template" type="text/x-handlebars-template">
    <div class="tone">
        <button class="stop">stop</button>
        <input type="number" class="frequency" value="{{frequency}}" data-index="{{index}}"/>
        <div class="freqControl freqControl{{index}}"/>
    </div>
</script>

CSS

.volume, .freqControl {
    width: 400px;
}

.stop{
    background-color: red;
    color: white;
}

JavaScript

<script id="tone-template" type="text/x-handlebars-template">
    <div class="tone">
        <button class="stop">stop</button>
        <input type="number" class="frequency" value="{{frequency}}" data-index="{{index}}"/>
        <div class="freqControl freqControl{{index}}"/>
    </div>
</script>