Визуализация голоса с микрофона с помощью web audio api

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;
    }
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

59
Оставить комментарий

avatar
59 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
58 Авторы комментариев
ElbertNofAlvinoxypeAlvinoxypeJohnnyfenceJohnnyfence Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
JanleF
Гость

Viagra Pfizer 100 Mg Prezzo [url=https://buyciallisonline.com/#]Cialis[/url] Keflex Dosage Urinary cialis online Viagra Sin Receta En Farmacias Chile

JanleF
Гость

Achat Finasteride [url=https://buyciallisonline.com/#]buy cialis online in usa[/url] Viagra Doctor Calgary Cialis Cialis 5 Giorni

RogelioCab
Гость
RogelioCab

buy viagra for women uk https://canadianpharmacystorm.com viagra sale vancouver

RobertCIP
Гость
RobertCIP

cheap viagra tablets uk generic cialis cheap herbal viagra online

WilliamAcurn
Гость
WilliamAcurn

best place to buy viagra online generic http://cialisxtl.com viagra sale los angeles

Vernoncrott
Гость
Vernoncrott

cialis where to buy – malaysia buy viagra online old do u have buy viagra

RobertIdeok
Гость
RobertIdeok

where can i buy cialis in london generic viagra 100mg buy cialis with online prescription [url=https://edpillsphrm.com]generic ed pills[/url] buy red viagra

Elmerwah
Гость
Elmerwah

how to buy viagra in ireland https://www.sildwithdoctorprescription.com buy cialis cheap canada

DonaldSeasy
Гость
DonaldSeasy

order viagra in india http://kaletra24.com – kaletra generic cialis generic name

DonaldSeasy
Гость
DonaldSeasy

buy viagra johannesburg http://hydroxychloroquine24.com – plaquenil viagra cialis

DonaldSeasy
Гость
DonaldSeasy

cheap viagra real http://aralenph.com – chloroquine order viagra online overnight delivery

DonaldSeasy
Гость
DonaldSeasy

order viagra online overnight delivery http://hydroxychloroquine24.com – hydroxychloroquine cialis c5 pill

DonaldSeasy
Гость
DonaldSeasy

buy levitra united states http://kaletra24.com – buy generic kaletra viagra plus buy

DonaldSeasy
Гость
DonaldSeasy

buy viagra online now http://tadal24ph.com – cialis buy viagra from canada online

DonaldSeasy
Гость
DonaldSeasy

how to buy generic cialis http://aralenph.com – aralen viagra

DonaldSeasy
Гость
DonaldSeasy

where to buy viagra in london http://aralenph.com – alaren price cialis price

DonaldSeasy
Гость
DonaldSeasy

cialis order uk http://aralenph.com – alaren online buy viagra dubai

DonaldSeasy
Гость
DonaldSeasy

where can i order cialis online http://hydroxychloroquine24.com – plaquenil generic buy cialis kuala lumpur

DonaldSeasy
Гость
DonaldSeasy

viagra by mail order from canada http://tadal24ph.com – generic cialis where to order viagra online

DonaldSeasy
Гость
DonaldSeasy

buy levitra in thailand http://kaletra24.com – Lopinavir buy cialis canada yahoo answers

VirgilGuipt
Гость
VirgilGuipt

cheapest cialis canada .com
sildenafil

VirgilGuipt
Гость
VirgilGuipt

order cheap generic viagra
viagra without a doctor prescription

VirgilGuipt
Гость
VirgilGuipt

generic name for viagra
cheap viagra

VirgilGuipt
Гость
VirgilGuipt

where can i buy viagra in london
viagra

VirgilGuipt
Гость
VirgilGuipt

buy viagra johor bahru
viagra online

VirgilGuipt
Гость
VirgilGuipt

cialis online discount
buy sildenafil

VirgilGuipt
Гость
VirgilGuipt

buy viagra thailand
viagra online

VirgilGuipt
Гость
VirgilGuipt

order cialis online with mastercard
viagra

VirgilGuipt
Гость
VirgilGuipt
VirgilGuipt
Гость
VirgilGuipt

cialis buy canada
viagra erection

VirgilGuipt
Гость
VirgilGuipt

order levitra online uk
generic viagra

VirgilGuipt
Гость
VirgilGuipt

cheap genuine viagra uk
buy viagra

VirgilGuipt
Гость
VirgilGuipt

cialis generic
viagra pills

VirgilGuipt
Гость
VirgilGuipt
Donaldneeft
Гость
Donaldneeft

viagra vs cialis vs levitra buy viagra

Donaldneeft
Гость
Donaldneeft

viagra substitute viagra pills

Herbertlep
Гость
Herbertlep
Herbertlep
Гость
Herbertlep

cialis for peyronie
http://tadalafilprof.com

Clintoncooth
Гость
Clintoncooth

real viagra without a doctor prescription viagra without a doctor prescription 150 mg
buy generic viagra online

Clintoncooth
Гость
Clintoncooth

viagra without a doctor prescription viagra
order cheap viagra online uk

Viagra Generic
Гость

viagra pills best generic viagra websites
cheap cialis in the uk

Viagra Generic
Гость

viagra online pharmacy directions for use of viagra
buy viagra east london

unsenty
Гость

Cialis E Simili [url=https://buycialisuss.com/]Buy Cialis[/url] precios cialis 10 Cialis Stendra Order Now Legally On Line Without Prescription

JasonAroxy
Гость
JasonAroxy

pain meds online without doctor prescription ambien without a doctor’s prescription
onlinepharmacyero.com

Jeromepef
Гость
Jeromepef

what is cialis generic viagra
bestpricemedz.com viagra without doctor prescription

Jeromepef
Гость
Jeromepef

lowest price cialis buy generic cialis
bestpricemedz.com cialis vs viagra

Jeromepef
Гость
Jeromepef

generic cialis at walgreens pharmacy buy generic cialis
bestpricemedz.com cialis without doctor prescription

treantinc
Гость
treantinc

Where To Order Doryx Jersey Citybuy Vigora 100 [url=https://agenericcialise.com/]buy cialis canada[/url] cialis prix france Generic Cialis insufflation cialis

Shannonviamy
Гость
Shannonviamy

cheapest cialis cialis without doctor prescription
tadalafilprof.com – generic cialis coming out

Shannonviamy
Гость
Shannonviamy

does cialis lower your blood pressure cheap cialis
tadalafilprof.com – cost of cialis 20mg tablets