JavaScript практика: визуализация голоса с микрофона. Web Audio API

Я нашёл контент. Сегодня я научу вас создавать визуализацию звука на HTML + CSS +JS. Мы будем использовать микрофон, а звук будет преобразовываться в виде звуковых частот на экране. Изучим web audio api.

Суть такова, при нажатии в окне браузера, будет запускаться скрипт. Данный скрипт будет создавать визуализацию голоса поступаемого в микрофон. Голос будет декодироваться и в зависимости от силы сигнала изменять стили.

HTML

Здесь просто заголовок с надписью «Нажмите на экран».

<h1>Нажмите на экран</h1>

CSS

CSS тоже простой, оформляем задний план и заголовок. Так же добавляем стили для ещё не существующих элементов с классами logo.

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo {
    margin: 2px;
    border-radius: 30px;
}
h1 {
    color: #000;
    cursor: pointer;
}

JS

/*СОЗДАЁМ ОСНОВНЫЕ ПЕРЕМЕННЫЕ*/
var body, num, array, width, context, logo, myElements, analyser, src, height;

/*ЗАПИСЫВАЕМ В ПЕРЕМЕННУЮ body ЭЛЕМЕНТ body*/
body = document.querySelector('body');

/*УКАЗЫВАЕМ КОЛИЧЕСТВО СТОЛБЦОВ НА ИНДИКАТОРЕ*/
num = 32;

/*СОЗДАЕМ МАССИВ*/
array = new Uint8Array(num*2);

/*УКАЗЫВАЕМ ДЛИНУ СТОЛБИКОВ В PX*/
width = 10;

/*ПРИ НАЖАТИИ НА КНОПКУ МЫШИ В ДОКУМЕНТЕ*/
window.onclick = function(){

    if(context) return;

    /*УДАЛЯЕМ ЭЛЕМЕНТ С ТЕКСТОМ*/
    body.querySelector('h1').remove();

    /*ПРОПИСЫВАЕМ ЦИКЛ ВНУТРИ КОТОРОГО БУДЕМ СОЗДАВАТЬ ЭЛЕМЕНТЫ НАШИХ СТОЛБИКОВ*/
    for(var i = 0 ; i < num ; i++){
       logo = document.createElement('div'); /*КАЖДЫЙ ЭЛЕМЕНТ БУДЕТ ЗАПИСЫВАТЬСЯ ВНУТРИ ПЕРЕМЕННОЙ logo*/
       logo.className = 'logo'; /*ДЛЯ ВЫШЕ СОЗДАННОГО ЭЛЕМЕНТА МЫ ПРОПИСЫВАЕМ КЛАСС logo*/
       logo.style.background = 'blue'; /*ПРОПИСЫВАЕМ КРАСНЫЙ ЦВЕТ ФОНА*/
       logo.style.minWidth = width+'px'; /*УКАЗЫВАЕМ ЕГО ШИРИНУ*/
       body.appendChild(logo); /*ДОБАВЛЯЕМ ЭЛЕМЕНТ ВО ВНУТРЬ ЭЛЕМЕНТА body*/
     }

    myElements = document.getElementsByClassName('logo');/*ЗАПИСЫВАЕМ ЭЛЕМЕНТ logo В ПЕРЕМЕННУЮ myElement*/
    context = new AudioContext(); /*СОЗДАЕМ НОВЫЙ ЭКЗЕМПЛЯР КЛАССА AudioContext*/

    /*СОЗДАЁМ АНАЛАЙЗЕР*/
    analyser = context.createAnalyser();

    /*СОЗДАЁМ ЗАПРОС ДОСТУПА К МИКРОФОНУ*/
    navigator.mediaDevices.getUserMedia({
        audio: true
    }).then(stream => {
        src = context.createMediaStreamSource(stream);
        src.connect(analyser);
        loop();
    }).catch(error => {
        alert(error + '\r\n\ Отклонено. Страница будет обновлена!');
        location.reload();
    });
}

function loop() {
    window.requestAnimationFrame(loop);
    analyser.getByteFrequencyData(array);
    for(var i = 0 ; i < num ; i++){
        height = array[i+num];
        myElements[i].style.minHeight = height+'px';
        myElements[i].style.opacity = 0.008*height;
    }
}