Уделил час времени, вот основные недочеты, будет приятно если ознакомитесь.
1.!!!!!! Много обработчиков. Можно одним все решить. Почитайте про делегирование событий.
///
var interface=document.getElementById("interface");
interface..addEventListener('input', function (e) {
var target= e.target || e.srcElement // получаем элемент где произошло событие
switch(target.id){
case "hatHarmon" : // для каждого input
aVolume = e.target.value;
break;
case //.....
});
// И проще и быстрее и нагляднее. Вместо мусора ...Button-ов то же самое одним все накрыть.
2.Слишком много document.querySelector ты каждый раз во всем document, то есть во всем dom дереве ищешь то что находиться рядом! Намного быстрее будет
var interface=document.getElementById("interface");
var hatValume=interface.querySelector("#hatVolume")
tomValue=hatValume.parentElement.nextElementSibling.querySelector("#tomVolume");
3. getDocumentId быстрее чем querySelector(#id) в разы, сам проверял.
4. Область видимости ;(function(){ ю..весь код...})();
5. У тебя ++i в конце в цикле script.js не обрабатывает первый элемент.. Замени на i++;
Т.е. ты находишь элемент и уже в нем ищешь.
6.
if (dCh.checked) {
dVel = 1;
};
if (!dCh.checked) { // зачем, лишние операции, потеря скорости, замени на else
dVel = 0.5;
};
if (cCh.checked) {
cVel = 1;
};
// не красиво долго, плохие имена, я путаю, "dCh cCh - 10 сек уходит на нахождение различия". Код не поддерживается, долго искать что такое cCh, вся область засорена мусорными глобальными переменными.
// Решение, разбить все на блоки или функции, или Паттерн реализовать, к примеру фабрику для звуков и акцентов
// Массивы у вас не массивы а куча переменных, можно автоматизировать циклом, создать массив из этих элементов, и перебирая его уже составить 2 массива из звуков и акцентов, и уже работать с ними.
7. Не правильно именуете переменные, переменные с маленькой буквы именуют, а классы большими.
8style.css очень плохо, вы снова каждый раз ищите во всем документе. Составляйте более конкретные селекторы
#start:hover,
#stop:hover,
#clear:hover {
background-color: #2C7769;
}
/* медленно, xQuery долго(для больших проектов конечно) их ищет этот селектор. Нужно расписать до него путь поконкретнее*/
#playStop div{
background-color: #2C7769;
}
9 Вы много раз в подряд объявляете i, let i не спасает в циклах, у вас есть let i=0; глобальной области в начале где-то. Потом можно уже просто for(i=0;i<....
Вроде все. Но код рабочий конечно, но почти не живучий.