[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.