На этой неделе я разработал веб-сайт в виде генератора хрустальных поющих чаш. Это был интерфейсный проект с использованием HTML, CSS и Javascript. Задание требовало от меня демонстрации манипуляций с DOM, получения API, включения как минимум 4 HTML-страниц и использования Bootstrap по крайней мере для одного элемента.
Я использовал API ежедневных котировок из «Они так сказали» на главной странице. Я бы предпочел иметь API, который меняет вдохновляющую цитату при каждом обновлении страницы, но я выбрал бесплатную версию. Цитаты по-прежнему являются мотивационными, поэтому они отлично сочетаются с темой сайта.
На странице генератора происходит все волшебство. Он отображает ряд хрустальных поющих чаш, по одной на каждую ноту. Затем есть еще один ряд под ним с кнопкой воспроизведения и остановки для каждой ноты. Что касается аудио, я нашел видео на YouTube, где кто-то играет каждую ноту хрустальных поющих чаш. Затем я использовал ссылки на видео для создания файлов .mp3 через сайт конвертации. Затем я обрезал аудиофайлы, чтобы избавиться от тихих интро и аутро. Причина этого в том, что звук будет воспроизводиться, как только пользователь нажмет кнопку воспроизведения, и чтобы он плавно зацикливался.
Когда вы нажимаете кнопку воспроизведения, изображение чаши, назначенной для этой ноты, меняется на чашу с тенью позади нее, чтобы создать эффект свечения. Затем, когда вы остановите воспроизведение, снова появится исходное изображение без тени. Эта функция была реализована с помощью функций JavaScript. Как только я узнаю больше о бэкэнде, мне бы хотелось, чтобы генератор мог записывать звук, который создает пользователь, и предоставлять возможность сохранить его в виде файла .mp3.
Также есть музыкальная страница, куда я вставляю плейлист из Deezer. Я хотел, чтобы на этой странице был другой API, но я изо всех сил пытался заставить любой из них извлекать данные. В будущем я хотел бы продолжить попытки реализовать эту функцию, но со временем встроенный плейлист идеально воплотил мое видение.
Последние страницы — это страница о сайте и страница контактов. Страница контактов включает форму Bootstrap с включенной проверкой. Bootstrap также используется для кнопки на главной странице. Самая захватывающая особенность для меня - это изображения чаш, которые меняются так, как будто они светятся, когда воспроизводится звук. Функция JavaScript оказалась не такой сложной, как я думал, и в итоге стала приятным дополнением к видению проекта.
С другой стороны, самой большой проблемой была реализация медиа-запросов. Им потребовалось больше времени, чем мне хотелось бы, чтобы они работали гладко из-за некоторых сбоев в пути, но после завершения было очень приятно узнать, что веб-сайт реагирует на экраны разных размеров. В целом, работать над этим проектом было очень приятно, и я не могу дождаться, чтобы в будущем внести больше улучшений в веб-сайт.
