Чтобы добиться визуализации звука и некоторых интересных эффектов, вам необходимо использовать некоторые методы AudioContext, предоставляемые API веб-аудио:
Интерфейс AudioContext представляет собой граф обработки звука, построенный из связанных вместе аудиомодулей, каждый модуль представлен AudioNode . Аудиоконтекст управляет созданием содержащихся в нем узлов и выполнением обработки или декодирования звука. Прежде чем делать что-либо еще, вам необходимо создать объект AudioContext , поскольку все происходит внутри контекста. Рекомендуется создать объект AudioContext и повторно использовать его вместо того, чтобы каждый раз инициализировать новый объект AudioContext, а также использовать объект AudioContext для нескольких различных источников звука и каналов одновременно.
<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio> <canvas ref='canvas' width='300px' height='300px'></canvas>
const ctx = новый AudioContext();
Метод createMediaElementSource() интерфейса AudioContext используется для создания нового объекта MediaElementAudioSourceNode , ввода существующего элемента HTML<audio>or<video>`, после чего соответствующий звук можно воспроизвести или изменить.
const audioSrc = ctx.createMediaElementSource(this.audioElement);
Метод createAnalyser() класса AudioContext может создать AnalyserNode , который можно использовать для получения данных о времени и частоте звука и реализации визуализации данных.
константный анализатор = ctx.createAnalyser();
Значение атрибута fftSize интерфейса AnalyserNode представляет собой длинное целое число без знака, которое представляет размер окна выборки (сигнала). Эти (сигнальные) выборки используются для получения данных в частотной области при выполнении быстрого преобразования Фурье (БПФ). Значение атрибута fftSize должно быть ненулевой степенью 2 в диапазоне от 32 до 32768, его значение по умолчанию — 2048;
анализатор.fftSize = 512;
Метод connect() интерфейса AudioNode позволяет вам подключить выход узла к указанной цели. Эта указанная цель может быть другим AudioNode (таким образом направляя аудиоданные на следующий указанный узел) или AudioParam, чтобы предыдущий узел. Выходные данные могут автоматически изменять следующее значение параметра с течением времени.
audioSrc.connect(анализатор);
Свойство destination AudioContext возвращает AudioDestinationNode представляющий конечный узел назначения всех аудио (узлов) в context , которым обычно является устройство рендеринга звука, например динамик.
анализатор.connect(ctx.destination)
Тип массива Uint8Array представляет собой 8-битный целочисленный массив без знака, а при создании его содержимое инициализируется значением 0. После создания на элементы массива можно ссылаться как на объекты или с помощью индексации индексов массива.
getByteFrequencyData() 方интерфейса AnalyserNode копирует текущие данные частоты во входящий Uint8Array (массив беззнаковых байтов).
Если длина массива меньше AnalyserNode.frequencyBinCount , то лишние элементы Analyser будут удалены. Если она больше, то лишние элементы массива будут игнорироваться.
визуализация() {
const arr = новый Uint8Array(this.analyser. FrequencyBinCount);
this.analyser.getByteFrequencyData(arr);
this.draw(обр);
}, Метод HTMLCanvasElement.getContext() возвращает контекст canvas или значение null, если контекст не определен. 2d создает двумерный контекст рендеринга CanvasRenderingContext2D.
this.canvas = this.$refs.canvas.getContext('2d');draw(arr) { Canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight); const start = ((document.body); .clientWidth / 2) - ((arr.length / 2) * 3)); arr.forEach((item, index) => { this.canvas.beginPath(); this.canvas.strokeStyle = '# B2AFF4'; this.canvas.lineWidth = 3; this.canvas.moveTo(start + (index * 4), this.canvasHeight); lineTo(start + (index * 4), this.canvasHeight - item/2); this.canvas.stroke();};Дисплей эффектов:
На этом завершается статья об AudioContext для аудиовизуализации (обмен веб-технологиями). Для получения дополнительной информации об AudioContext для аудиовизуализации выполните поиск по предыдущим статьям на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. Надеюсь, вы прочитаете больше в будущем. Поддержите downcodes.com!