Что такое звуковая визуализация
Визуализация звука, как следует из названия, заключается в преобразовании формы волны, частоты и других данных из звука в изображение, а затем его отображении на экране. Через него мы можем сделать какой-нибудь крутой интерфейс для музыки.
Ниже я проанализируюКейс по разработке аудиовизуализации команды облачных музыкальных технологий, чтобы быстро помочь Xiaobai создать свой любимый классный интерфейс визуализации звука.
Изображение выше
Если мы хотим разработать такой классный аудиоинтерфейс, мы можем сначала поговорить об этом.canvas
что такое холст
canvasЭто элемент-контейнер для рисования графики в HTML5, который обычно завершает рисование графики с помощью скриптов JavaScript. Чтобы завершить нашу разработку аудиовизуализации ниже, мы можем позаимствовать несколько методов структурирования холста.Следующее поможет новичкам понять некоторые свойства и методы холста, разработав небольшой случай обратного отсчета страницы.
код сначала
<canvas id="myCanvas">
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.font = "50px Verdana";
let dis = 550;
let i = 10;
function animation(){
requestAnimationFrame(function(){
if(dis >= 0){
--dis;
if(dis%50 == 0 ){
ctx.clearRect(0,0,300,150);
ctx.fillText(i--,100,100);
}
animation();
}
});
}
animation();
</script>
мы вhtmlСоздать страницуcanvasэлемент холста и установите идентификаторmyCanvas, его размер по умолчанию 300 * 150. После создания этого холста мы можем рисовать графику в JavaScript-скриптах.
пройти первымgetElementById()Найдите этот элемент, затем создайте объект холста.ctxИ установите цвет заливки на красный, шрифт на Verdana, размер на 50px, установитеdisПеременные используются для условного управления, определяют другоеiПеременная используется для отображения чисел обратного отсчета, а затем мы можем начать рисовать числа обратного отсчета на нашем холсте.
Создаватьanimationфункция, в этой функции мы используем html5 API, предназначенный для запроса анимацииrequestAnimationFrameЗапрос кадров анимации по сравнению с таймерамиsetTimeout, это не приводит к пропуску кадров, пропуску кадров и выглядит более плавно.
существуетrequestAnimationFrameВнутри сначала установите условия рамки кистиdis>=0,disУменьшайте каждый раз на единицу, всего 550 раз, а затем ставьте условие выполнять операцию рисования каждые 50 раз.Перед каждым рисунком проходитеclearRect(x,y,width,height)Метод очищает заданный прямоугольник на холсте.Его четыре параметра представляют координаты x и y левого верхнего угла очищаемого прямоугольника, а также ширину и высоту очищаемого прямоугольника в пикселях. затем пройтиfillText()Число обратного отсчета рисуется в указанной позиции на холсте.Этот метод получает четыре параметра:textвывод текста,xx-координата нарисованного текста,yКоордината y нарисованного текста, обратите внимание: эти два значения относятся к канве, последний параметрmaxWidthУказывает максимальную ширину разрешенного текста, это необязательный параметр.
Затем мы рекурсивно вызываемanimation()работать до тех пор, пока не закончится обратный отсчет, и, наконец, вызвать его извнеanimation()Функция, до сих пор, простой интерфейс обратного отсчета завершена. мы также можем датьcanvasпройти черезinnerWidthа такжеinnerHeightнастраивать
Размер холста.
canvasМожно нарисовать различную графику, пожалуйста, обратитесь к своему собственному для получения дополнительной информации.canvasсодержание
закончил говоритьcanvas, следующая наша тема.
Web Audio
Прежде чем мы начнем, нам также нужно понять, что такое веб-аудио.
Веб-аудио — это набор API для обработки и анализа аудио в Интернете. Он позволяет пользователям манипулировать звуком в аудиоконтексте, имеет модульную маршрутизацию, а также позволяет нам управлять пространственным распределением звука.
С веб-аудио мы можем достичьполучить данныеа такжеданные картыДва процесса, которые мы реализуем ниже.
Реализация проекта
Сначала создадим страницуcanvasэлемент иaudioярлык и кнопка воспроизведенияaЭтикетка.
Затем получите его в JavaScriptaudioа такжеaэти два элемента и датьaМетка устанавливает событие клика.
var btn = document.getElementById('play-btn');
var audio = document.getElementById('audio');
btn.addEventListener('click',function(){
btn.style.display = 'none';
audio.play();
onloadAudio();
})
существуетonLoadAudio()Внутри функции мы сначала получаемcanvasэлемент, установите его так, чтобы он занимал всю страницу, а затем создайтеcanvasОбъект.
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
Создайте объект **AudioContext**, чтобы управлять созданием содержащихся в нем узлов и выполнением операций обработки и декодирования звука.
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
пройти черезcreateAnalyser()Метод создает **AnalyserNode** для получения данных о времени и частоте аудио для визуализации аудиоданных.
var analyser = audioCtx.createAnalyser();
analyser.fftSize = 512;
fftSize вMDNВведение — параметр быстрого преобразования Фурье, значение должно быть ненулевой степенью 2 в диапазоне от 32 до 32768. Значение по умолчанию — 2048. Здесь берем 512. Кроме того, значение fftSize определяет длину FrequencyData.
Свяжите аудио узел сAudioContext, в качестве входных данных для всего аудиоанализа.
Мы используемMediaElementAudioSourceNodeБуду<audio>Узел действует как источник ввода и подключает звук к анализатору, который, в свою очередь, подключает анализатор к устройству вывода.
var source = audioCtx.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioCtx.destination);
Затем получите частотный массив.
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
frequencyBinCount()Значение fftSize составляет половину значения fftSize, поэтому длина массива Uint8Array() здесь равна 256.
Затем установите ширину лада, а высоту определяет только переменная без присвоения значения, оставив ее позади для прохожденияdataArray[]Динамические настройки массива
var barWidth = WIDTH / bufferLength*1.5;
var barHeight;
рисовать лады
определитьrenderFrame()Функция используется для отрисовки ладов и очищает весь холст перед каждой отрисовкой, а затем обновляет массив частот.
ctx.clearRect(0,0,WIDTH,HEIGHT);
analyser.getByteFrequencyData(dataArray);
пройти черезforУстановите высоту каждого прямоугольника в цикле, установите цвет фона в соответствии с высотой, затем нарисуйте прямоугольник и залейте цветом фона. Затем вызовите функцию рекурсивно.
barHeight = dataArray[i];
var r = barHeight + 25 * (i / bufferLength);
var g = 250 * (i / bufferLength);
var b = 50;
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
ctx.fillRect(x,HEIGHT-barHeight,barWidth,barHeight);
x += barWidth+2;
Наконец, запустите код и испытайте собственную визуальную музыку.
резюме
В этой статье кратко рассказывается об использовании холста и о том, как получить данные о частоте звука с помощью API-интерфейсов, связанных с веб-аудио.
Однакоcanvasа такжеWeb AudioПолезность этого гораздо больше, читатели также могут использовать свое воображение и творческий потенциал для разработки более интересных проектов.
Прикрепите исходный код проекта:GitHub.com/Янтарь/ЛЕС…