JavaScript | Визуализация звука с микрофона + файлы проекта
![ThreePixDroid [RU]](http://yt3.ggpht.com/ytc/AIdro_m9hY0wSlD4ygQJ9MwISJSheP6X-5dtaCYYZ-hmk6ytX8k=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 2 июн 2019
- #Визуализация #звука используя #WebAudioAPI
Первая часть видео: • JavaScript | Аудио виз...
Ссылка на скачивание файлов проекта (Визуализация звука с Микрофона на чистом JavaScript): threepixdroid?w=wall-9...
Не забудьте подключить микрофон:)
Короткий урок по JS - визуализация аудио данных полученных с микрофона на примере анимации нескольких DIV элементов в реальном времени.
Вопрос: Почему в видео я умножаю количество ячеек массива на два(7-ая строчка) и беру частоты из второй половины массива(45-ая строчка)?
Ответ: Всё просто - это из за того что мой микрофон создаёт шумы и в основном они все попадают на первые ячейки, из за этого визуализация выглядит не очень красиво.
Попробуйте подобрать для себя лучший вариант поиграв с числами - количеством столбцов и их шириной (5-ая и 9-ая строчки).
Также попробуйте менять другие свойства элементов: тени, цвета... и т.п.
Если хотите что бы звук выводился на колонки \ динамики после 33-ей строки подключите analyser к выходу - analyser.connect(context.destination);
При работе с Web Audio API все приводят пример с микрофоном либо с в качестве источника звука. А как выбрать другой источник? Стоит задача визуализировать любой звук во вкладке браузера
Нашел вот такой код, но при этом звук пропадает и не появляется, а плеер играет дальше. P.S.: код из расширения для хрома
chrome.extension.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
if (msg.action === 'start') {
var audioCtx = new (window.AudioContext)();
chrome.tabCapture.capture({
audio : true,
video : false
}, function(stream) {
var source = audioCtx.createMediaStreamSource(stream);
var analyser = audioCtx.createAnalyser();
source.connect(analyser);
analyser.connect(audioCtx.destination);
analyser.fftSize = 1024;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
function draw() {
analyser.getByteTimeDomainData(dataArray);
port.postMessage({data: dataArray, bufferLength: bufferLength});
};
var intv = setInterval(function(){ draw() }, 1000 / 30);
port.onDisconnect.addListener(function(){
clearInterval(intv);
audioCtx.close();
stream.getAudioTracks()[0].stop();
});
}
);
}
});
});
В этом коде при попытке получить массив данных из потока, получаю одни нули. Попробовал этот же код на другом ПК - работет. Первый, конечно, слабее по параметрам, но врятли в этом причина. Пытаюсь докопаться до правды..
@@WhiteBearNSK Ты как Фокс Малдер
@@ThreePixDroid_RU ну блин) просто есть классная задумка, два дня бился, не мог понять почему не работает, а оказалось, что не работает на конкретном ПК. Теперь, выяснить причину дело принципа. И да, спасибо тебе за твои видосы! Все четко, грамотно, понятно.
It's amazing! Отличный формат видео👍🏻 Смотреть и слушать приятно) Уложился в 10+ мин., ничего лишнего) Продолжай в том же духе💪🏻 Подписка :)
спасибо большое;) стараюсь!;)
ты поразительно вырос за год и это вдохновляет! Спасибо за видео!
не за что!)
Чувак, спасибо!
Это уже что то новенькое! 😍
Не за что :)Рад , что понравилось!)
@@ThreePixDroid_RU было бы круто если бы объяснил как работать со звуком в js ;з
@@ruslanmagomedov409 В планах есть несколько уроков по работе со звуком... не могу обещать когда появятся..но не очень скоро.
Спс бро очень крутая подача и интересная тема, жду новых видосов(с меня лайк и подписка).
через недельку новый урок скорее всего;) болею уже две недели, не мог ничего записать нормально;)
Счастья ,здоровья автору
Спасибо;)
Очень круто! Спасибо!
Не за что!)
Спасибо братуха я именно вот это искал "визуализация+микрофон+js" 👍👍
Не за что)
И еще, добавте видеокурс про Canvas подробнее, что такое ctx, и как это работает, с нуля(js), пожолуйста. Заранее Спасибо!
@@modernops4209 ctx - это просто сокращение от context. обычная переменная - в моем случае хранит в себе 2d контекст элемента canvas.
Я отвечаю ты самый лучший! В ютубе нет таких видео с визуальными эффектами. Надо продвигать свой канал: добавить английские субтитры и купить подписчиков на seosprint, socpublic...
Спасибо) Да, подобных видео не было на момент записи, а мне хотелось самому посмотреть нечто связанное с аудио , но ничего не нашёл, решил сам снять) Покупать подписчиков плохая идея!
Magic
Интересное... А откуда скрипт знает, что надо поток микрофона обрабатывать? Будет ли он также работать с лин.входом, или c "What U Hear"? У меня файл wav, допустим, лежит на GoogleDrive, я его подключаю с помощью HTML5
Блин большое спасибо! Давно искал нечто подобное и лаконичное) правда один вопрос. я хочу заняться радио типо lofi на ютубе. Буду вещать через программу обс, добавляю как локальный файл и на экране только клик ми, как это можно убрать чтобы он заранее после добавления как браузер отображал звук?
Привет. Без действия пользователя аудио не запустится по соображениям безопасности.
Я вместо window.requestAnimationFrame(loop) сделал через рекурсивный SetTimeOut, чтобы можно было управлять количеством опросов. Но теперь не пойму как сделать оключение этой функции при нажатии на другую кнопку? SetTimeout получается вне зоны видимости...
Привет) Используй clearTimeout()
Например: let myT = setTimout()/....
clearTimeout(myT)
Отличное видео!
Я предлагаю сделать визуализацию уже готового аудио файла, можно-ли так сделть?
Да, у меня уже есть такой ролик на канале. Но советую посмотреть канал Frank's laboratory у него больше контента на эту тему..)
не думаю, что видео с аудио подходят к плейлисту "Generative Art". Лучше сделать отдельный плейлист с работой аудио.
Было бы круто добавить свой мини-плеер, где можно остановить трек / запустить. Потому что его можно потом добавить в плейлист к играм (остановить фоновую музыку / запустить).
Привет, почему не пишешь на es6 стандарте?
JS для меня новый язык и можно сказать первый, ещё не успел вникнуть во всё:)
А вот вопрос как вырубить эту функцию loop?
Супер! Интересно, а можно вместо микрофона вставить ссылку на интернет радио?
не пробовал;) но думаю это реально как то провернуть;)
ThreePixDroid вот пытаюсь)
Как астанавииить?
как сделать голосовые сообщения через js на сайт?
Привет, не пробовал. думаю нужно сохранять запись с микрофона на сервер. от туда её уже можно отправить куда угодно. этого одним js ом не добиться.
Надо копать в сторону speech recognition, все решается одним js но не во всех браузерах работает
Привет знаю ты уже перестал снимать видео я давно смотрю тебя и хотел узнать как можно получить звук системы ??? пожалуйста ответь если не сложно если запишешь про это видео было бы хорошо пожалуйста если сделаешь за ранее спасибо
Следующее видео на днях выходит)
Знаю как получить данные микрофона и простого аудио. С системными звуками не работал..
@@ThreePixDroid_RU Буду ждать с нетерпением следующее видео :D из твоих видео научился многому с визуализатора всё и началось а с системными звуками жаль хотел сделать себе обои на рабочий стол у меня есть один проект где автор как то получил системный звук но я не понял как оно работает 😅😅😅 спасибо что ответил жду новое видео
сделал всё, как в видео, но почему то не запускается пишет: Type error: context.createMediaStreamSourse is not a function оклонено.
а какой браузер?;) проверю...у себя...
ThreePixDroid яндекс
У меня Всё работает: Скачай мой архив и попробуй его запустить : vk.com/doc278773966_504404469?hash=3089ba9cbb5b38fea1&dl=23c6a758ed1b566036
Кажется у тебя ошибка - по буквам прочитал сейчас, "Source" в конце надо, через "C", а у тебя "SourSe".....
@@ThreePixDroid_RUпоменял, все равно выдаёт эту ошибку, только теперь написано там sourCe. где-то накосячил походу
Бесконечная рекурсия - это гарантированное переполнение стека. Почему здесь это работает?
Привет, по тому что это не совсем рекурсия. rAF ставит в очередь передаваемую функцию, чтобы вызвать её перед следующем обноавлением экрана.
Видос отличный, но ктото знает как сделать это с питоном, только именно так, а не кривые некрасивые графики?
На питоне стандартные графические библиотеки фигово работают с графикой. В blender можно писать скрипты на питоне и сделать потрясающие визуальные анимации, хотя там и без питона их можно сделать..
Думаб для качественного визуального результата в питоне, не обойтись без графической библиотеки.
@@ThreePixDroid_RU Спасибо большое
Самый ужасный вариант, использования этого API с точки зрения производительности, у меня в диспетчере в 2 раза память и цп увеличили нагрузку из оперы, как урок сойдет но добавлять этот кусок фикалей на сайт не стоит
По идее на сайт ничего вообще добавлять не стоит, если нет прям крайней необходимости) И этот урок совсем не связан с веб, а скорее показывает базовое подключение web Audio API.