Вход для микрофона – распространенная функция веб-приложений, позволяющая пользователям взаимодействовать с аудиоконтентом. Одним из важных аспектов работы с микрофонным входом является получение амплитуды, которая представляет силу или громкость аудиосигнала. В этой статье мы рассмотрим различные методы получения амплитуды микрофона с помощью JavaScript. Мы предоставим примеры кода для иллюстрации каждого подхода. Давайте погрузимся!

Метод 1: API веб-аудио
API веб-аудио предоставляет мощные возможности для работы со звуком в браузере. Чтобы получить амплитуду микрофона с помощью этого API, вы можете выполнить следующие действия:

navigator.mediaDevices.getUserMedia({ audio: true })
  .then((stream) => {
    const audioContext = new AudioContext();
    const microphone = audioContext.createMediaStreamSource(stream);
    const analyser = audioContext.createAnalyser();
    microphone.connect(analyser);
    analyser.connect(audioContext.destination);
    const bufferLength = analyser.fftSize;
    const data = new Uint8Array(bufferLength);
    function updateAmplitude() {
      analyser.getByteTimeDomainData(data);
      // Calculate the average amplitude
      const sum = data.reduce((acc, value) => acc + value, 0);
      const amplitude = sum / bufferLength;
      // Use the amplitude value
      console.log(amplitude);
      requestAnimationFrame(updateAmplitude);
    }
    updateAmplitude();
  })
  .catch((error) => {
    console.error('Error accessing microphone:', error);
  });

Метод 2: getUserMedia с ScriptProcessorNode (устарел)
До API веб-аудио ScriptProcessorNode обычно использовался для обработки ввода с микрофона. Хотя сейчас он устарел, его все еще можно использовать для совместимости со старыми браузерами. Вот пример:

navigator.mediaDevices.getUserMedia({ audio: true })
  .then((stream) => {
    const audioContext = new AudioContext();
    const microphone = audioContext.createMediaStreamSource(stream);
    const scriptProcessor = audioContext.createScriptProcessor(1024, 1, 1);
    scriptProcessor.onaudioprocess = (event) => {
      const inputBuffer = event.inputBuffer.getChannelData(0);

      // Calculate the average amplitude
      const sum = inputBuffer.reduce((acc, value) => acc + Math.abs(value), 0);
      const amplitude = sum / inputBuffer.length;

      // Use the amplitude value
      console.log(amplitude);
    };

    microphone.connect(scriptProcessor);
    scriptProcessor.connect(audioContext.destination);
  })
  .catch((error) => {
    console.error('Error accessing microphone:', error);
  });

Метод 3: getUserMedia с AnalyserNode (устаревший)
Для старых браузеров, которые не поддерживают API веб-аудио, вы можете использовать устаревший метод, включающий AnalyserNode. Вот пример:

navigator.getUserMedia = (navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia ||
  navigator.msGetUserMedia);
if (navigator.getUserMedia) {
  navigator.getUserMedia({ audio: true }, (stream) => {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const microphone = audioContext.createMediaStreamSource(stream);
    const analyser = audioContext.createAnalyser();
    microphone.connect(analyser);
    const bufferLength = analyser.fftSize;
    const data = new Uint8Array(bufferLength);
    function updateAmplitude() {
      analyser.getByteTimeDomainData(data);
      // Calculate the average amplitude
      const sum = data.reduce((acc, value) => acc + value, 0);
      const amplitude = sum / bufferLength;
      // Use the amplitude value
      console.log(amplitude);
      requestAnimationFrame(updateAmplitude);
    }
    updateAmplitude();
  }, (error) => {
    console.error('Error accessing microphone:', error);
  });
} else {
  console.error('getUserMedia not supported in this browser.');
}

В этой статье мы рассмотрели несколько методов получения амплитуды микрофона с помощью JavaScript. Мы рассмотрели современный подход с использованием API веб-аудио, а также устаревшие и устаревшие методы для совместимости со старыми браузерами. Включив эти методы в свои веб-приложения, вы сможете улучшить взаимодействие с пользователем и создать инновационные функции на основе звука.