Пишите вверху:
Недавно я занимался исследованием новых технологий, но, к сожалению, я увидел, как кто-то в Nuggets поделился серией статей о применении технологии h5, в основном включая использование аудио, потоковой передачи мультимедиа, местоположения пользователя, окружающего освещения и других устройств ядра H5. интерфейсы, так что подготовьтесь. Следуйте этому каталогу, чтобы запачкать руки. Это небольшая демонстрация аудиообъекта AudioContext. Конечно, я читал чужие демо. Надеюсь, читателям понравится~
Как обычно, размещено нижемой блогАдрес, не забудь поставить лайк~
Отображение достижений:
Гит-адрес:
GitHub.com/easy928330/towering…
Описание функции:
1. В соответствии с музыкой, которую вы загружаете на страницу, визуально отображайте ритм музыки; 2. Щелкните переключатель режимов, чтобы отобразить ритм текущей музыки в форме волны во временной области.
Детали реализации:
Все DEMO на самом деле относительно простое, главное знать некоторыеWeb AudioСвязанные API, поэтому, когда я буду объяснять, я расскажу об использовании некоторых API, используемых в этом DEMO. Кроме того, одной из трудностей этой демонстрации является эффект падения маленьких квадратов в верхней части гистограммы, которую вы видите.Я также объясню это. Анимации, показанные на странице, все нарисованы на основе холста, поэтому я не буду говорить об этом больше. Далее переходим к теме.
Чтобы создать звуковую голосовую среду, код выглядит следующим образом:
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
var audioContext = new AudioContext();
var analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
var audio = document.getElementById('audio');
var audioSrc = audioContext.createMediaElementSource(audio);
audioSrc.connect(analyser);
analyser.connect(audioContext.destination);
Это несколько строк кода, одна за другой, чтобы объяснить.
1.window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
2.var audioContext = new AudioContext();
Создать контекст речевой среды, и все операции с речью в дальнейшем производить в этой среде. По сути, это то же самое, что и операция getContext в Canvas. Для совместимости с разными браузерами добавляются разные префиксы.
3.var analyser = audioContext.createAnalyser();
4.analyser.fftSize = 2048;
Создайте узел Analyzer, через который вы сможете получать данные о событиях и частоте аудиосигнала. Затем с помощью оператора 4 можно установить количество точек дискретизации БПФ в частотной области (быстрое преобразование Фурье). Его значение Значение атрибута fftSize должно быть ненулевой степенью двойки в диапазоне от 32 до 32768, а значение по умолчанию — 2048. Однако мы использовали не так много точек, поэтому просто выбрали некоторые значения точек, чтобы показать ритм музыки.
5.var audioSrc = audioContext.createMediaElementSource(audio);
Создайте интерфейс MediaElementAudioSourceNode для связи с HTMLMediaElement. Его можно использовать для воспроизведения и обработки звука из видео- или аудиоэлементов. Кроме того, мы также можем получить информацию MediaStream аудиопотока с микрофона компьютера или других источников через интерфейс createMediaStreamSource().
6.audioSrc.connect(analyser);
7.analyser.connect(audioContext.destination);
Свяжите узел анализатора с целевой аудиосредой, где audioContext.destination возвращает объект AudioDestinationNode, а интерфейс AudioDestinationNode представляет окончательный выходной адрес аудиографики в конкретном случае, обычно это динамик. Это означает, что он связан с аудиоустройством.
Получите аудиоданные и визуализируйте интерфейс визуального ритма:
После того, как среда создана, мы должны получить соответствующие аудиоданные и визуализировать интерфейс визуального ритма на основе холста. код показывает, как показано ниже:
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
Значение fftSize сбора половинного значения analyser.frequencyBinCount, обычно равное числу используемых значений визуальных данных. Затем, функция analyser.getByteFrequencyData (массив), текущая копия данных в массив частотной области Uint8Array. Затем возникает такая трудность, как отрисовывать дочерние элементы верхнего поля земли.
var barWidth = 10;
var gap = 2;
var barNum = Math.round(cWidth / (barWidth + gap)); //绘制多少个条形
for (var i = 0; i < barNum; i++) {
var value = array[i];
if (topArr.length < barNum) {
topArr.push(value)
}
if (value < topArr[i]) {
ctx.fillRect(i * (barWidth + gap), cHeight - (topArr[i] -= 1) - topHeight, barWidth, topHeight);
} else {
ctx.fillRect(i * (barWidth + gap), cHeight - value - topHeight, barWidth, topHeight);
topArr[i] = value;
}
}
В соответствии с шириной CANVAS, шириной и расстоянием между полосами мы рассчитываем количество полос, которые нужно отрисовать, а затем числовое значение определяет, сколько аудиоданных мы используем. Для верхних квадратиков мы создали массив, значением инициализации массива являются аудиоданные, и если новые аудиоданные больше, чем соответствующее значение данных инициализации, мы будем напрямую рисовать квадратики верха, затем в соответствии с новыми аудиоданными обновить значение данных инициализации. И наоборот, если новые аудиоданные меньше, чем инициализированные данные, на этот раз, за счет эффекта постепенного уменьшения начального значения, спецэффекты изменения посадки. Наконец, рендеринг бара выглядит следующим образом:
var grd = ctx.createLinearGradient(i * barWidth, cHeight - value, i * barWidth, cHeight);
grd.addColorStop(0, "yellow");
grd.addColorStop(0.3, "rgb(255,0,0)");
grd.addColorStop(0.5, "rgb(200,0,0)");
grd.addColorStop(0.7, "rgb(150,20,20)");
grd.addColorStop(1, "rgb(100,0,0)");
ctx.fillStyle = grd;
ctx.fillRect(i * (barWidth + gap), cHeight - value, barWidth, topArr[i]);
ctx.fill();
Здесь мы добавляем линейный градиент к цвету полосы, чтобы он выглядел немного лучше~ (Кажется, он выглядит не очень...)
Переключение режима формы волны:
С линейным рендерингом предыдущих аудиоданных это проще, отличается только значение источника данных, данные временной области копируются в массив массива с помощью следующего кода, а остальная часть рисунка выполняется с помощью moveTo и lineTo холста API, я не буду делать подробное введение.
analyser.getByteTimeDomainData(array);
Использованная литература:
2.Чжан Синьсюй использует HTML5Web Audio API для добавления звука во взаимодействие JS веб-страницы