В моем последнем приключении я хотел добавить в свой проект красивые визуализаторы звука, и я не хотел прилагать никаких усилий, чтобы понять принципы работы со звуком. Итак, я отправился искать на GitHub несколько хороших библиотек, и, черт возьми, я нашел одну!

🌟 Моя любимая библиотека

Я думаю, что эта конкретная библиотека, безусловно, лучшая с точки зрения вариативности и простоты. Визуализации потрясающие и настраиваемые, а библиотека надежная, обеспечивающая отличную поддержку интеграции и модификаций.

Он называется AudioMotion, и вы можете посмотреть его Официальную демонстрацию, чтобы увидеть, как он выглядит!

💃 Простой способ увидеть варианты в демо:

  1. Дважды щелкните песню, чтобы загрузить ее.
  2. Воспроизведите песню.
  3. Нажмите кнопку «Настройки» в левом верхнем углу, откроется панель. Затем выберите предустановку «Демонстрация (случайная)» в правом нижнем углу.
  4. Продолжайте нажимать кнопку Загрузить, чтобы изменить визуализатор.

Что касается того, почему я выбрал именно эту библиотеку среди конкурентов, я объяснил это в разделе « Конкуренция» ниже.

🎶 Как использовать 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 });

Здесь,

  1. container — это div, внутри которого добавляется холст визуализатора.
  2. audioSource — аудиоэлемент для визуализации.

❗️Необходимо помнить несколько вещей:

  1. Убедитесь, что для свойства crossorigin элемента audio установлено значение «anonymous».
  2. Иногда звук не может начать воспроизводиться, пока вы не взаимодействуете с браузером. Поэтому не забудьте нажать на страницу один раз, прежде чем воспроизводить аудио.

Я делюсь демо-версией 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-адрес видео для аудиоэлемента, и он будет работать! Попробуй это!

🏇 Конкурс

Я попробовал несколько других библиотек для создания визуализаций, но они были либо не так хороши, как мой лучший выбор, либо не имели поддержки библиотек.

  1. Wavesurfer.js — в первую очередь предназначен для создания статических волновых форм отдельных аудиофайлов. В нем нет живой аудиовизуализации.
  2. p5.js — обеспечивает открытую обработку звука, позволяя вам использовать частоты по своему усмотрению. Делать визуализации самостоятельно — хлопотно.
  3. ThreeAudio.js — предоставляет только один тип визуализации, не поддерживает модификации и является скорее экспериментом.
  4. Peaks.js — похож на wavesurfer.js и в основном предназначен для статических сигналов.
  5. Audio Visualization List by willianjusten — хороший сборник всех аудио-экспериментов и библиотек. Однако, за исключением AudioMotion, ни один из них не был так хорош.

🌠 Заключение

Это все, что нужно, если вам нужны визуализаторы для вашего сайта! Вы можете продолжать экспериментировать с пресетами или использовать один из моих демонстрационных пресетов.

AudioMotion использует звук в реальном времени для получения частот и отображения соответствующего визуализатора. Вы не можете визуализировать звук, который не воспроизводится. Однако, если вы когда-либо хотели предварительно обработать свой звук, чтобы вы могли найти свой визуализатор, это совсем другое путешествие!

✨ В моем следующем блоге «In The Depths» я буду обсуждать, как предварительно обработать ваш звук, чтобы вы могли сохранять частоты и сделать свой визуализатор доступным для поиска! ✨

Прочитайте здесь 👉 Я опубликую здесь ссылку, когда она выйдет!

🤘 Кредиты

  1. Обложка от pch.vector на Freepik
  2. Аудиодвижение на GitHub

Первоначально опубликовано на https://getschwfty.hashnode.dev.