Guitar Tab Reader

Plays Music From A Guitar tab.

by Grant

HTML

<div>    <br>
    <p>:
        <input id="stepe" placeholder="V" size="50" disabled></input>
    </p>
    <p>e
        <input id="littleE" size="50"></input>
    </p>
    <p>B
        <input id="B" size="50"></input>
    </p>
    <p>G
        <input id="G" size="50"></input>
    </p>
    <p>D
        <input id="D" size="50"></input>
    </p>
    <p>A
        <input id="A" size="50"></input>
    </p>
    <p>E
        <input id="E" size="50"></input>
    </p>
</div>
<br>
<input type="number" id="s" step=".5" min="0" max="5" value=".25"></input>
<input id="next" type="button" value="Play"></input>
<p id="q">Loading...</p>
<input type="range" id="v" step=".01" min="0" max="1" value=".5"></input>
    <br>
        <textarea id="ta"></textarea>
        <input type="button" id="tada" value="Add"></input>

CSS

input {
    font-family:monospace
}
p {
    font-family:monospace
}
textarea {
    font-family:monospace
}

JavaScript

context = new AudioContext;
gainNode = context.createGain();
gainNode.connect(context.destination);

gain= 2;

function getValue(i) {
    return document.getElementById(i).value;
}

function addValue(i, d) {
    document.getElementById(i).value += d;
}

function setValue(i, d) {
    document.getElementById(i).value = d;
}

document.getElementById("tada").onclick = updateLines;

function updateLines(){
    var e=getValue("ta").replace(/[^-0-9\n]/g,'').replace("\n\n","\n").split("\n");
    for(var l=0;l<e.length;l+=6){
        try{
        addValue("littleE",e[l]);
        addValue("B",e[l+1]);
        addValue("G",e[l+2]);
        addValue("D",e[l+3]);
        addValue("A",e[l+4]);
        addValue("E",e[l+5]);
        }catch(err){}
    }
    updateDash();
}

document.getElementById("littleE").oninput = updateDash;
document.getElementById("B").oninput = updateDash;
document.getElementById("G").oninput = updateDash;
document.getElementById("D").oninput = updateDash;
document.getElementById("A").oninput = updateDash;
document.getElementById("E").oninput = updateDash;


function updateDash() {
    max = 10;
    findDashMax("littleE");
    findDashMax("B");
    findDashMax("G");
    findDashMax("D");
    findDashMax("A");
    findDashMax("E");
    applyMax();
    i = "littleE";
    dash = new Array();
    for (var l = 0; l < getValue(i).length; l++) {
        if (getValue(i).charCodeAt(l) == 45) {
            dash[l] = true;
        } else {
            dash[l] = false;
        }
    }
    /*applyDash("B");
    applyDash("G");
    applyDash("D");
    applyDash("A");
    applyDash("E");*/
}

function findDashMax(i) {
    if (getValue(i).length > max) {
        max = getValue(i).length;
    }
}

function applyMax() {
    if (max < 50) {
        document.getElementById("stepe").size = 50;
        document.getElementById("littleE").size = 50;
        document.getElementById("B").size = 50;
        document.getElementById("G").size = 50;
       ...