В моем последнем приключении я хотел добавить в свой проект красивые визуализаторы звука, и я не хотел прилагать никаких усилий, чтобы понять принципы работы со звуком. Итак, я отправился искать на GitHub несколько хороших библиотек, и, черт возьми, я нашел одну!
🌟 Моя любимая библиотека
Я думаю, что эта конкретная библиотека, безусловно, лучшая с точки зрения вариативности и простоты. Визуализации потрясающие и настраиваемые, а библиотека надежная, обеспечивающая отличную поддержку интеграции и модификаций.
Он называется AudioMotion, и вы можете посмотреть его Официальную демонстрацию, чтобы увидеть, как он выглядит!
💃 Простой способ увидеть варианты в демо:
- Дважды щелкните песню, чтобы загрузить ее.
- Воспроизведите песню.
- Нажмите кнопку «Настройки» в левом верхнем углу, откроется панель. Затем выберите предустановку «Демонстрация (случайная)» в правом нижнем углу.
- Продолжайте нажимать кнопку Загрузить, чтобы изменить визуализатор.
Что касается того, почему я выбрал именно эту библиотеку среди конкурентов, я объяснил это в разделе « Конкуренция» ниже.
🎶 Как использовать AudioMotion?
Установить AudioMotion
npm i audiomotion-analyzer
Импорт пакета
import AudioMotionAnalyzer from 'audiomotion-analyzer';
Инициализировать AudioMotion
const container = document.getElementById('container'); const audioSource = document.getElementById('audio'); const audioMotion = new AudioMotionAnalyzer(container, { source: audioSource });
Здесь,
container
— этоdiv
, внутри которого добавляется холст визуализатора.audioSource
— аудиоэлемент для визуализации.
❗️Необходимо помнить несколько вещей:
- Убедитесь, что для свойства crossorigin элемента audio установлено значение «anonymous».
- Иногда звук не может начать воспроизводиться, пока вы не взаимодействуете с браузером. Поэтому не забудьте нажать на страницу один раз, прежде чем воспроизводить аудио.
Я делюсь демо-версией Codepen для приведенного выше кода вместе с 14 пресетами! Отключите вкладку браузера, или вам оторвут уши! (поскольку несколько аудио воспроизводятся вместе)
Демо-версия Codepen 👉 https://codepen.io/adityakrshnn/pen/abQvNBp
🎛️ Объединение нескольких источников
Чтобы подключить несколько источников звука к одному визуализатору, вы можете пропустить упоминание source
в конструкторе и вместо этого использовать метод connectInput()
.
const audioElements = document.getElementsByTagName('audio'); const audioMotion = new AudioMotionAnalyzer( document.getElementById("container") ); audioMotion.connectInput(audioElements[0]); audioMotion.connectInput(audioElements[1]);
Таким образом звук из элементов объединяется в единый визуализатор.
Демо-версия Codepen 👉 https://codepen.io/adityakrshnn/pen/MWzayLb
🎬 Подключение аудио из видео
✨ Вы можете просто указать URL-адрес видео для аудиоэлемента, и он будет работать! Попробуй это!
🏇 Конкурс
Я попробовал несколько других библиотек для создания визуализаций, но они были либо не так хороши, как мой лучший выбор, либо не имели поддержки библиотек.
- Wavesurfer.js — в первую очередь предназначен для создания статических волновых форм отдельных аудиофайлов. В нем нет живой аудиовизуализации.
- p5.js — обеспечивает открытую обработку звука, позволяя вам использовать частоты по своему усмотрению. Делать визуализации самостоятельно — хлопотно.
- ThreeAudio.js — предоставляет только один тип визуализации, не поддерживает модификации и является скорее экспериментом.
- Peaks.js — похож на wavesurfer.js и в основном предназначен для статических сигналов.
- Audio Visualization List by willianjusten — хороший сборник всех аудио-экспериментов и библиотек. Однако, за исключением AudioMotion, ни один из них не был так хорош.
🌠 Заключение
Это все, что нужно, если вам нужны визуализаторы для вашего сайта! Вы можете продолжать экспериментировать с пресетами или использовать один из моих демонстрационных пресетов.
AudioMotion использует звук в реальном времени для получения частот и отображения соответствующего визуализатора. Вы не можете визуализировать звук, который не воспроизводится. Однако, если вы когда-либо хотели предварительно обработать свой звук, чтобы вы могли найти свой визуализатор, это совсем другое путешествие!
✨ В моем следующем блоге «In The Depths» я буду обсуждать, как предварительно обработать ваш звук, чтобы вы могли сохранять частоты и сделать свой визуализатор доступным для поиска! ✨
Прочитайте здесь 👉 Я опубликую здесь ссылку, когда она выйдет!
🤘 Кредиты
- Обложка от pch.vector на Freepik
- Аудиодвижение на GitHub
Первоначально опубликовано на https://getschwfty.hashnode.dev.