Mod/hook "Voice" Голосовое управление

[Lesnik75]

Есть люди, которым мышкой кликать скучно, а пальцами по клавиатуре/экрану непривычно или сложно.
Специально для них мы начинаем новую актуальную современную разработку - модификацию "голосовое управление форумом" на базе VBullatin 3.8.4 patch level X.
Это знакомое многим общение с Google, Алисой или Siri адаптированное к forum.3dnews.tech.
Можно будет как надиктовать сообщение, открыть новую тему так и прослушать сообщения. Голос * будет переводится в тест и обратно.
Так же в процессе тестирования функция модерирования, но реализация этого пока отложена.

Если вы хотите принять посильное участие, то просим предоставить образец голоса, которым будут озвучиватся ваши сообщения.
Это может быть как ваш собственный голос *, так и сторонние записи, с безусловным соблюдением авторского и морского права.

Тем, кто не выразит желание получить уникальный голос *, эта функция будет назначена в произвольном порядке.
Кому-то выпадет голос Винни-Пуха или Чебурашки, кому-то Ковальски или братьев Колобков.
А кто-то будет разговаривать голосом Чарли Чаплина.
В разработке участвуют нейросети, сильные программисты и опытные кинологи, владеющие навыками обучения кошек командам "дай лапу", "кушать" и "брысь".

Куратором проекта будет Majesty.

* — Общероссийское общественное движение в защиту прав избирателей "Голос" признано иностранным агентом

[garniv]

Чтобы добавить голосовой ввод на форум vBulletin, можно использовать Web Speech API (поддерживается в Chrome, Edge и Safari) или сторонние сервисы. Вот пошаговая инструкция:


1. Способ через Web Speech API (нативно в браузере)

Что нужно:

• Форум должен работать по HTTPS (обязательное требование для доступа к микрофону).
• Редактор сообщений vBulletin (например, в шаблоне editor).

Шаги:

1.1. Добавьте кнопку голосового ввода в редактор:

• Откройте Админ-панель → Styles & Templates → Edit Templates.
• Найдите шаблон редактора (например, editor_textarea или editor_toolbar_on).
• Вставьте код кнопки:
  [pre][code=html]<button id="voiceInputButton" type="button" title="Голосовой ввод">
  <img src="путь/к/иконке-микрофона.png" alt="🎤">
  </button>
  [/code][/pre]

1.2. Добавьте JavaScript для распознавания речи:

• В шаблон footer или отдельный JS-файл добавьте:
  

  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('voiceInputButton');
    const textarea = document.querySelector('textarea[name="message"]'); // Или ID вашего поля ввода
  
    if ('webkitSpeechRecognition' in window) {
      const recognition = new webkitSpeechRecognition();
      recognition.continuous = false;
      recognition.interimResults = false;
      recognition.lang = 'ru-RU'; // Язык распознавания
  
      button.addEventListener('click', () => {
        recognition.start();
        button.style.backgroundColor = '#ff0000'; // Индикация записи
      });
  
      recognition.onresult = function(event) {
        const transcript = event.results[0][0].transcript;
        textarea.value += transcript;
        button.style.backgroundColor = '';
      };
  
      recognition.onerror = function(event) {
        console.error('Ошибка:', event.error);
      };
    } else {
      button.style.display = 'none'; // Скрыть кнопку, если API не поддерживается
    }
  });

2. Способ через сторонние сервисы (например, Google Cloud Speech-to-Text)

Что нужно:

• API-ключ от Google Cloud (платно, но точнее).
• Базовые навыки работы с AJAX.

Шаги:

2.1. Подключите API Google Cloud:

• Зарегистрируйтесь на Google Cloud и активируйте Speech-to-Text API.
• Создайте API-ключ в разделе Credentials.

2.2. Модифицируйте код редактора:

• Добавьте кнопку и скрипт, как в первом способе, но с отправкой аудио на Google:
  

  // Запись аудио через MediaRecorder
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      const mediaRecorder = new MediaRecorder(stream);
      let audioChunks = [];
  
      mediaRecorder.addEventListener('dataavailable', event => {
        audioChunks.push(event.data);
      });
  
      button.addEventListener('click', () => {
        mediaRecorder.start();
      });
  
      mediaRecorder.addEventListener('stop', () => {
        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
        const formData = new FormData();
        formData.append('audio', audioBlob);
  
        // Отправка на сервер Google
        fetch('https://speech.googleapis.com/v1/speech:recognize?key=ВАШ_API_КЛЮЧ', {
          method: 'POST',
          body: JSON.stringify({
            config: { languageCode: 'ru-RU' },
            audio: { content: await blobToBase64(audioBlob) }
          })
        })
        .then(response => response.json())
        .then(data => {
          textarea.value += data.results[0].alternatives[0].transcript;
        });
      });
    });

3. Готовые решения и плагины

Если не хотите писать код с нуля:

• Плагин Voice Typing for vBulletin (платный, ищите на тематических форумах).
• Интеграция с Discord или Telegram API для обработки голосовых сообщений.

Важные нюансы:

1. Поддержка браузеров: Web Speech API работает в Chrome, Edge, Safari. Firefox требует ручной настройки.
2. HTTPS: Обязателен для доступа к микрофону.
3. Производительность: Нативные методы могут давать ошибки распознавания. Google Cloud точнее, но платный.
4. Модерация: Добавьте фильтры для текста, чтобы избежать спама через голосовой ввод.

Пример реализации: Демо Web Speech API.

[Lesnik75]

Да, в таком вот акцепте.
Главное - заполните в профиле поле "Голос" *.
Иначе возможно всякое.

* — Общероссийское общественное движение в защиту прав избирателей "Голос" признано иностранным агентом

[Lesnik75]

Гражданин начальник, произошла чудовищная ошибка!
Оперативно вносим исправления.

* — Общероссийское общественное движение в защиту прав избирателей "Голос" признано иностранным агентом

Позор хулигану Квакину, ослику ИА и прочим ПИА.