WordPress × Wavesurfer JS - наконец-то дошли руки поделиться своим опытом использования wavesurfer.js в связке с сайтом на Wordpress.
WordPress × Wavesurfer JS
Когда я делал вторую версию своего сайта и решил обновить раздел с музыкой мне захотелось сделать плеер с визуализаций частотной диаграммы, как у SoundCloud. Я достаточно быстро нашел wavesurfer.js и дальше начался процесс сбора информации с разных сайтов о том как его использовать. Постепенно я пришел к желаемому результату и решил им поделиться, возможно, это будет полезно для таких же начинающих разработчиков как и я.
Wavesurfer.js - это библиотека визуализации аудио с открытым исходным кодом для создания интерактивных, настраиваемых форм волны.
Я сделал шаблон страницы Wordpress, который можно выбрать при создании страницы и поместил в него сам скрипт, верстку и дополнительные возможности, которые мне были нужны.
Список опций, которые есть в моём примере:
- Аудио плеер в целом
- Визуализация частотной диаграммы
- Поиск по треку (кликом по частотной диаграмме)
- Время общее и прошедшее время трека
- Изображение обложка
- Кнопка play / pause (иконка на кнопке меняется)
- Регулятор громкости
- Кнопка mute
- Музыкальные стили в формате тегов
- Кнопка-ссылка купить
- Иконки-ссылки на музыкальные платформы
- Описание трека и текст песни
Посмотрите пример страницы с плеером на моём сайте.
Пример страницы с плеером Wavesurfer JS
Далее я постараюсь подробно рассказать особенности веб-разработки, которую я сделал.
Вот исходный код шаблона страницы WordPress с плеером Wavesurfer JS и дополнительными функциями.
Сразу уточню, что я использую версию скрипта wavesurfer.js 6.6.3 и размещаю её локально на своём веб-сервере. Это не последняя версия, вы можете найти её на GitHub проекта
Код моего решения также доступен на GitHub
https://tiku.ru/?p=21527
Комментарии
Отправить комментарий