JavaScript | Аудио визуализация + исходники
![ThreePixDroid [RU]](http://yt3.ggpht.com/ytc/AIdro_m9hY0wSlD4ygQJ9MwISJSheP6X-5dtaCYYZ-hmk6ytX8k=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 23 май 2019
- #Визуализация #аудио данных полученных из mp3 файла на примере #анимации html элемента в реальном времени.
Вторая часть (Визуализация звука с микрофона): • JavaScript | Визуализа...
Рабочий пример кода: threepixdroid.com/av/av.html
Ссылка на скачивание файлов проекта (Визуализация звука на JavaScript):
Загрузите код на сервер, используйте Live Preview или Виртуальный сервер
если хотите избежать ошибок в коде.
threepixdroid?w=wall-9...
Кстати, по скольку все полученные значения не будут превышать 255, очень удобно использовать их для контроля цвета.
Ссылка на демонстрацию : threepixdroid.com/av/av.html
А можно как то теги вытащить внутри аудио файла картинку имя и тд?
Вау! Шикарные видео! Пожалуйста, не останавливайся :)
Спасибо;)
Супер! Отличное видео! Спасибо огромное!!!
огромное спасибо! облегчаете жизнь начинающим)
Класс, твои видосы просто огонь, имхо одни из лучших вообще по js в русскоязычном ютубе
Спасибо! Очень круто
не за что;)
Очень не плохо! Всё получилось. Спасибо!
пожалуйста)
Просто топ!
Спасибо! Родилась идея пет проекта!
Заебись, все работает
Лайк + подписка)
очень сильно!
Спасибо за видео, у меня была проблема связанная с ограничениями хрома, но ее можно обойти если загрузить музыку через input, и прочитав его. Хз почему это работает, но работает. Еще раз спасибо большое.
Не за что) да во многих современных браузерах ограничения и блоки) через input работает по тому что самостоятельно запускаешь процесс... там нет ограничений пока.
👌👌
Thank You, I need it
Затупил и указал глобальный путь до аудио файла и сидел не мог понять почему не работает😂
А ты крут
благодарю)
Спасибо! Работает! А как добавить кнопки, таймлайн и плэйлист?
I don't understande russian BUT THAT WAS A GREATE TUTORIAL.
thank you;)
Красное на черном..)))
Моё любимое сочитание)
Ребята, дайте совет, как можно динамически подставлять другое аудио для такой визуализации? А то я пытаюсь в createMediaElementSource подснуть другое аудио, а мне выдает ошибку:
Uncaught DOMException: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.
Спасибо за видео! Есть только вопрос, можно ли как-то увеличить частоту обновления? А то во время проигрывания круг иногда принимает очертания квадрата.
Отрисовка уже от компа зависит...
Можно сделать эффект на canvas, там таких проблем не будет.
@@ThreePixDroid_RU Спасибо)
Класс! Раскажа как сделать слайдер.
как вставить круглую картинку в середину этой штуки?
Вставляете элемент с изображением и задаете у него border radius 50%
переменную я бы назвал logo -> logoStyle. Условие паузы лучше возвращать return; a не вызов reuestAnimationFrame. И какие varы? let const на дворе
Видео вышло 3 года назад, на тот момент я всего неделю изучал js и сразу снял видео.. и const let ещё на тот момент "на дворе" небыли строгим условием.
Хм, я не совсем понял про массив. Почему имеено 40-ой индекс?
Привет) Нет необходимости использовать 40 ячейку, можно любую другую. На мой взгляд в этой ячейке довольно динамично менялись частоты в отличии от 1 ячейки например - по этому 40.
@@ThreePixDroid_RU Ахаха, понял, спасибо)
У меня ошибка в консоле: "MediaElementAudioSource outputs zeroes due to CORS access restrictions for"
Проблема решена, думаю вы запустили файл не используя локальный сервер или хостинг.
@@ThreePixDroid_RU да я просто весь материал скинул в одну папку и из нее открыл html в браузере, так не будет работать?
установите локальный сервер для тестирования
вот урок: ruclips.net/video/2teiBCpoWzs/видео.html
или разместите его на хостинге.
к сожалению не будет работать если распаковать и просто запустить index.html, а вот если разместить в интернете на хостинге то да - работать будет) или на локальном сервере)
Ещё можно попробовать запустить в Microsoft Edge как вариант, А Google Chrome , как я понял, по умолчанию в настройках безопасности запрещает выполнение локального скрипта, без использования локального сервера, или хостинга.
скачал файлы - запустил - не работает. В чём может быть проблема?
привет) зависит от того, как ты запускаешь, в каком браузере) можно просто посмотреть ошибку в консоли браузера...
если браузер chrome, возможно защита самого браузера не даёт запустить процесс, в этом случае попробуй запустить через edge например или есть вариант использовать live preview дополнение в visual studio code... тогда точно должно всё работать.
@@ThreePixDroid_RU спасибо. Использую мозилу. Там описание ошибки такое "The HTMLMediaElement passed to createMediaElementSource has a cross-origin resource, the node will output silence.". на этой строке "src = context.createMediaElementSource(audio);" Интересно бы узнать почему некоторые браузеры ругаются на этот код.
threepixdroid.com/av/av.html
скачал FireFox и проверил . Всё работает нормально . По ссылке выше демонстрация - тот же самый код.
Напиши если будет ошибка.
Прям спас. Но за var я бы пнул
Да это была моя 2 или 3 неделя изучения js, так что согласен)
Странно, у меня даже исходник не работает :с
привет;) а какая ошибка выходит?
проблема уже решалась в комментариях. скорее всего был использован браузер хром, у него принудительная блокировка стоит. нужно использовать хостинг https, локальный сервер или live view.
Ещё должно работать в internet explorer.
ThreePixDroid привет, ошибка в том, что точка исчезает и ничего не проигрывается( хмм спасибо посмотрю
@@cilferFM если напишешь мне ошибку из консоли браузера, то смогу дать точное решение проблемы.
Не ведитесь. Видео на самом деле как нарисовать красный круг в середине окна)