alexalexes

var node = this; // в ноду кладем текущий элемент Element;
// начинаем примерять селектор, двигаясь от текущего элемента к его родителям     
 while (node) // пока есть элемент (не null) (или на предыдущей итерации провалили матч и есть родитель)
 {
        if (node.matches(css)) // подходит селектор элементу ?
         return node; // возвращаем этот элемент, цикл останавливается
        else
         node = node.parentElement; // не подошло, устанавливаем на node родительский элемент, идем на следующую итерацию.
      }
return null; // цикл прошелся по всем родителям - ничего не нашли

----------
Подставляем свой "велосипед" closest в прототип элемента:
Element.prototype.closest = function (css)
-------------
Подставляем в прототип элемента метод matches любую доступную из перечисленных через || реализацию, если этот метод в разных браузерах называется по-разному, чтобы сгладить этот досадное недоразумение.

Element.prototype.matches = Element.prototype.matchesSelector || <подставьте любой метод, чтобы делал матч, но назывался не как у всех>

Не лучше ли background эксплуатировать для этих целей, меняя местами источники изображений?

<style>
      #elem1
      {
        display: block;
        width: 400px;
        height: 400px;
        background-image: url("back1.png"),
                          url("back2.png");
        transition: background-image 0.5s ease; /* для наглядности эффекта */
      }
    </style>
    <div id="elem1"></div>
    <script>
    var trigger = 0;
    setInterval(function()
    {
      var elem1 = document.getElementById('elem1');
      elem1.style.backgroundImage = trigger % 2 == 1 ? 'url("back1.png"), url("back2.png")' : 'url("back2.png"), url("back1.png")';
      trigger++;
    }, 1000);

    </script>

Среда выполнения JS в браузере изолирована от железа, поэтому тут нужна полноценная реализация клиент-серверного приложения.
Компьютер с COM-портом будет выступать в качестве веб-сервера.
На этом сервере необходимо реализовать серверный скрипт, который подключится к COM и будет осуществлять транзит по HTTP с клиентом - браузером.
А уже на стороне клиента API будет реализовано посредством JS, а получение данных - AJAX-ом.
Вот пример как сделать серверную часть на NodeJS.

Кнопку оставляете в покое, значение передаете скрытым полем.

<form action="?action=select_pay" method="POST">
<input type="hidden"  name="pay_mode" value="20"  />
<input type="submit" class="superbutton"  value="Яндекс Деньги"  />
</form>
<form action="?action=select_pay" method="POST">
<input type="hidden"  name="pay_mode" value="10"  />
<input type="submit" class="superbutton"  value="Еще одна платежка"  />
</form>

На мобильнике, как правило, есть тачскрин.
Я, обычно, проверяю наличие тач-обработчиков.
И не важно, что за устройство: яблоко, андроид и тд.

if ('ontouchstart' in document.documentElement) 
{
// есть сенсорный экран, значит, имеем дело с переносным гаджетом.
}
else
{
  // desktop версия кода
 (элемент ввода).focus(); //устанавливаем фокус
}

scheduler.attachEvent("onEventSave",function(id,ev,is_new)
{    
  var checked_users = ev.username.split(','); // переводим строку в список отмеченных id пользователей
  var new_text = ''; // сюда будем писать строку с именами пользователей
  var checked_users_count = checked_users.length; // кол-во отмеченных пользователей
  for (var i = 0; i < checked_users_count; i++)
  {
    var check_user_id = checked_users[i]; // текущий отмеченный id
    var ch_users = users.filter(usr => usr.key == check_user_id); // получаем человека из списка users по отмеченному id (на выходе тоже список, но не более 1 элемента)
    if (ch_users.length > 0)
      new_text += (new_text != '' ? ', ' : '') + ch_users[0].label; // вписываем в строку найденного пользователя
  }
  ev.text = new_text == '' ? 'Nobody' : new_text; // если никого не нашли, то как-то обозначаем эту ситуацию (Nobody)
  return true;
})

На стороне PHP пропустить полученный файл через GD библиотеку.
При необходимости, уменьшить качество выходного файла, и попутно сгенерировать preview, отправив его обратно клиентку (+ подтвердив получение сервером).
Учтите, придется увеличить доступный объем оперативной памяти для одного процесса PHP.
На моем опыте, чтобы GD проглотила 16 Мпикс картинку, нужно 128 Мб ОЗУ.
Перед скармливаем GD взвешиваем картинку с помощью getimagesize().
Если это не сделать, и с превышением лимита отдать на обработку библиотеке, то скрипт тихо-мирно заглохнет, не сообщив клиенту ничего, а так можно сгенерировать сообщение, что файл большой.

Сталкивался с такой особенностью, решал как раз через дополнительное поле hidden:

<label>
<input type="hidden" id="field_0_1" name ="param_list[0][field_1]" value="off"/>
<input type="checkbox" onchange="set_hidden_checkbox(this, 'field_0_1')"/>
</label>

function set_hidden_checkbox(target, id)
{
  var hidden = document.getElementById(id);
  if(hidden !== undefined)
     hidden.value = target.checked ? 'on' : 'off';
}

Атрибут value в hidden нужно инициализировать значением по умолчанию.

Анимация прокрутки происходит всегда за фиксированное время (сейчас 500 мс).
Если top получается 100 пикселей, то промотка будет казаться медленней, а если 1000 пикселей - то быстро.
А нужно сделать так, чтобы время анимации было пропорционально длине "прыжка".

var anim_speed = 300; // пикселей в секунду
var anim_time = (top * 1000) / anim_speed; // 1000 - поправка на милисекунды
//анимируем переход на расстояние 
$('body,html').animate({scrollTop: top}, anim_time);

PS: Обычная школьная формула по физике: время равно расстоянию деленное на скорость.

Ajax.php - серверный скрипт, он ни в коем образе не подгружается в браузер.
Он просто отвечает на запросы. Ответ может содержать текст, html, json или любой формат потока данных, определяемый http-заголовком ответа.
Если ответ приходит в виде текста скрипта, то его можно подключить так:

var script_elem = document.createElement('script'); // создаем DOM-элемент
script_elem.innerHTML = 'alert(123456)';                 // помещаем в него код скрипта
document.body.appendChild(script_elem);               // добавляем в документ

Когда перебирать начнешь массив, тогда и получишь индексы.
https://learn.javascript.ru/array-iteration

У вас задача на знание голого JavaScript.

var my_array =
[
  {
    data: 123
  },
  {
    data: 845
  },
  {
    data: 'dsdsd'
  }
];

my_array.forEach(function(item, i, arr)
{
  switch(i)
  {
    case 0:
      item.operation = item.data * 5;
      break;
    case 1:
      item.operation = item.data * 2;
      break;    
    default:
      item.operation = item.data + 'qwqwqw';
  } 
});

PS: Про то, как нужно положить внутрь foreach this, читайте тут.

Библиотеки используют для этих целей Web Audio API.
Если только нужно два действия: записать и проиграть, то достаточно изучить вот это руководство, чтобы написать свой велосипед.
Полной совместимости со смартфонами добиться не получится, где-то браузер - это полноценное медийное приложение, а где-то просто просмотрщик HTML, а медийный функционал доступен только через сторонние приложения, установленные непосредственно на смартфоне.