Как сделать визуализатор звука с помощью HTML CANVAS API?

В этой статье мы увидим, как сделать визуализатор звука с помощью API холста. Canvas API используется для рисования графики на элементе холста HTML. Итак, с помощью этой функции мы создадим визуализатор звука, который реагирует на звук с микрофона системы.

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

Используемые классы:

• MediaDevices: используется для доступа к мультимедиа.
• AudioContext: используется для создания анализатора.

Используемые методы:

• getUserMedia: получает доступ к микрофону.
• createMediaStreamSource: создает источник из потока для создания визуализатора звука.
• getContext: этот метод используется для получения доступа к контексту холста.
• requestAnimationFrame: этот метод помогает создавать анимацию.

Подход: Для создания аудиовизуализатора последуют следующие шаги:

• Создайте элемент холста, чтобы нарисовать визуализатор и кнопку для доступа к системному звуку в коде HTML.
• Получите доступ к своему микрофону с помощью API-интерфейса навигатора , который возвращает объект потока. MediaDevices — это класс, который обеспечивает доступ к аудиопотоку и может быть доступен только с помощью пользовательских событий, поэтому создайте кнопку и зарегистрируйте функцию, как показано ниже.

Синтаксис:

var btn = document.getElementById("mybtn");
btn.onclick = async()=>{
 let stream =await navigator.mediaDevices.getUserMedia({
     audio: true,
     video: true
   });
}

В приведенном выше коде у нас есть кнопка, состоящая из функции обратного вызова для события onclick для доступа к аудиоустройству.

Создайте экземпляр класса AudioContext и передайте ему объект потока, как показано ниже. Кроме того, создайте анализатор, который будет использоваться для анализа аудиоузлов путем создания визуализации данных.

Синтаксис:

 const audioContext = new AudioContext();
 const analyser = audioContext.createAnalyser();
 const mediaStreamSource = 
     audioContext.createMediaStreamSource(stream);
 mediaStreamSource.connect(analyser);
 analyser.fftSize = 256;

Определите функцию drawVisualizer() , которая постоянно вызывает себя с определенной частотой кадров, используя функцию requestAnimationFrame для отражения изменений в звуковых сигналах.

Добавьте методы API холста в функцию drawVisualizer , чтобы создать окончательную визуализацию, как показано ниже:

function drawVisualizer() {
  requestAnimationFrame(drawVisualizer);
  
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);
  analyser.getByteFrequencyData(dataArray);
  
  const width = visualizer.width;
  const height = visualizer.height;
  const barWidth = 10;
  
  const canvasContext = visualizer.getContext("2d");
  canvasContext.clearRect(0, 0, width, height);
  let x = 0;
  dataArray.forEach((item, index,array) => {
   const y = item / 255 * height*1.1;
   canvasContext.strokeStyle = `blue`;
   x = x + barWidth;
   canvasContext.beginPath();
   canvasContext.lineCap = "round";
   canvasContext.lineWidth = 2;
   canvasContext.moveTo(x, height);
   canvasContext.lineTo(x, height - y);
   canvasContext.stroke();
  })
 }

В приведенном выше фрагменте кода изначально мы объявляем типизированный массив для хранения аудиоузлов в виде целочисленных значений , т.е. dataArray, то мы получаем доступ к элементу холста, созданному выше , с помощью селектора JS ie.visualizer и получаем доступ к 2D-контексту холста, т.е.canvasContext. Мы перебираем элементы массива данных и для каждого элемента рисуем линейный путь от нижней части элемента холста до точки (x, высота — y) из приведенного выше кода. Мы назначили синий цвет линии и ширину линии 2 , что помогает нам рисовать несколько вертикальных линий.

Пример. В этом примере мы создаем визуализатор аудио с помощью Canvas API , AudioContext и mediaDevices .

Вывод: этот вывод состоит из круглого визуализатора синего цвета и кнопки рядом с ним для доступа к медиаресурсам системы.