Как сделать визуализатор звука с помощью 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 .
Вывод: этот вывод состоит из круглого визуализатора синего цвета и кнопки рядом с ним для доступа к медиаресурсам системы.