Надим

Написал функцию для эмуляции ввода сообщения в WhatsApp Web:

// Вызываем функцию для набора текста и отправки:

textEnter('Проверка события ввода сообщения в мессенджере WhatsApp. Смотрим, отсылается ли информация о том, что собеседник в данный момент печатает сообщение.');

// Функция для имитации ввода сообщения и его отправки:

function textEnter(text) {
	
	var array = text.split(''); // Разбиваем текст по символам в массив
	
	// Ищем поле вввода сообщения и записываем ссылку на него в переменную:
	
	var div = document.querySelector('div#main div[contenteditable="true"]');
	
	div.focus(); // Передаём фокус на поле ввода
	
	// Запускаем эмулятор посимвольного ввода:
	
	var emulator = setInterval(function() {
		
		// Пока есть символы в сообщени:
		
		if (array.length > 0) {
			
			// Вводим символ:
			var symbol = array.shift();
			div.innerHTML = div.innerHTML + symbol;
			
			// Передаём клавиатурные события отвечающие за ввод:
			div.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true }));
			div.dispatchEvent(new KeyboardEvent('keypress', { bubbles: true }));
			div.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));
			div.dispatchEvent(new InputEvent('input', { bubbles: true }));
			
		}
		
		// Если все символы введены:
		
		else {
			
			clearInterval(emulator); // Отключаем эмулятор ввода
			
			// Ищем и жмем кнопку отправки сообщения собеседнику:
			document.querySelector('span[data-icon="send"]').click();
			
		}
		
	}, 100);

}

Наверняка многим пригодится. Спасибо Mikhail Osher за наводку на правильный алгоритм действий)

Ваш вопрос не имеет никакого отношения к Reac, так как не React, но JavaScript в целом позволяет сохранять файлы из полей в локальную базу данных и хранить их там неограниченно долго.

Сохранить файл в память можно вот так:

// Берем первый попавшийся файл из поля input:
save_file = document.querySelector('input[type="files"]').files[0];

// И сохраняем в памяти браузера до востребования:
localforage.setItem('file', save_file, function(err, val) {
  console.log('Файл успешно сохранен:');
  console.dir(val);
});

Обратите внимание, что у вас должна быть подключена библиотека localForage:

<script src="localforage/dist/localforage.js"></script>

Скачать библиотеку можно с гитхаба, смотрите папку dist.

Чтобы потом извлечь сохраненный файл, попробуйте для теста перегрузить страницу и выполнить:

localforage.getItem('file', function(err, val) {
  console.log('Ранее сохраненный файл:');
  console.dir(val);
});

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

Если возникнет необходимость потом сохраненный файл отправить на сервер, то используйте FormData и XHR:

// Вытаскиваем файл из памяти и шлем на сервер:
localforage.getItem('file', function(err, val) {

  // Адрес для отправки файла POST-ом:
  var url = 'https://qna.habr.com/q/847927';

  // Создаем форму в конструкторе:
  var formData = new FormData();

  // Добавляем наш файл в форму:
  formData.append('file', val, val.name);

  // Отправляем форму на сервер:

  var xhr = new XMLHttpRequest();
  xhr.open('POST', url);
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        alert('Запрос выполнен успешно, ответ сервера: ' + xhr.responseText);
      }
      else {
        alert('При выполнении запроса произошла неизвестная ошибка!');
      }
    }
  }
  
  xhr.send(formData);

});

Найти элемент под фокусом можно вот так:
document.querySelector('input:focus');
Способ простой, но не все о нём знают.

Нашел на иностранном сайте, как симулировать клики на React. Ниже пример, который подходит и для WhatsApp:

const mouseClickEvents = ['mousedown', 'click', 'mouseup'];

function simulateMouseClick(element){
  mouseClickEvents.forEach(mouseEventType =>
    element.dispatchEvent(
      new MouseEvent(mouseEventType, {
          view: window,
          bubbles: true,
          cancelable: true,
          buttons: 1
      })
    )
  );
}

// Ищем диалог по номеру телефона:
var element = document.querySelector('span[title="+7 905 837-96-43"]');
simulateMouseClick(element); // Симулируем событие клика

Данный способ оказался рабочим, можно использовать. В целом оказалось достаточно одного события mousedown:

// Ищем диалог с по номеру телефона:
dialog = document.querySelector('span[title="+7 905 837-96-43"]');

// Вызываем событие mousedown на найденном элементе:
dialog.dispatchEvent(
  new MouseEvent('mousedown', {
      bubbles: true
  })
);

При этом bubbles является параметром обязательным, без него не работает.

Для поисковых систем конечно плохо, хотя они в принципе и умеют парсить динамический контент.

Blob - это и есть ваш звук!

Для его отправки на сервер нужно использовать конструктор форм FormData и отослать форму посредством AJAX.

На сервере потом смотрите глобальный массив $_FILES там и будет лежать ваш звук.

// Пример функции для отправки файла в виде Blob на сервер:

function send_blob_to_server(blob, url) {
  
  var formData = new FormData();
  formData.append('file', blob, blob.name);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', url);
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        alert('Запрос выполнен успешно, ответ сервера: ' + xhr.responseText);
      }
      else {
        alert('При выполнении запроса произошла неизвестная ошибка!');
      }
    }
  }
  
  xhr.send(formData);

}

// Для использовани функции первым параметром передаете Blob,
// а вторым параметром адрес куда надо отослать ваш Blob:
send_blob_to_server(audioBlob, 'https://qna.habr.com/q/846401');

Есть, как не быть. Данные веб-игр можно хранить в:
https://learn.javascript.ru/indexeddb

Удалите этот код:

$(document).on('submit', '#commentform', function(e) {
  e.preventDefault();
  var filter = $(this);
  $.ajax({
    url: filter.attr('action'),
    data: filter.serialize(),
    type: filter.attr('method'),
    success: function(data) {
      $('#review-thanks').addClass('active');
    },
    error: function() {}
  });
});

Вместо него используйте чистый JavaScript:

// По готовности страницы, вешаем на форму обработчик onsubmit инлайново:

document.addEventListener('DOMContentLoaded', function() {
	document.querySelector('form#commentform').setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
});

// Функция для отправки формы на чистом JavaScript:

function form_send(form) {
	form.setAttribute('onsubmit', 'event.preventDefault();');
	var url = form.getAttribute('action') + '?nocache=' + new Date().getTime();
	var xhr = new XMLHttpRequest(); xhr.open('POST', url);
	xhr.onreadystatechange = function() {
		if (xhr.readyState === XMLHttpRequest.DONE) {
			form.setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
			if (xhr.status === 200) {
				document.querySelector('#review-thanks').classList.add('active');
				alert('Форма успешно отправлена, ответ сервера: ' + xhr.responseText);
			}
			else {
				console.log('При отправке формы произошла ошибка, ниже объект с деталями ошибки:');
				console.dir(xhr);
				alert('При отправке формы произошла ошибка, детали смотрите в консоли.');
			}
		}
	}
	xhr.send(new FormData(form));
}

Алерты по желанию можете убрать.

Сначала удаляйте все символы, кроме цифр, только затем проверяйте длину номера телефона.