Для моего первого большого проекта в школе Flatiron я хотел создать планировщик островов Animal Crossing: New Horizons, чтобы пользователи могли выбирать, каких жителей они хотят, и просматривать другие варианты. В то же время я знал, что это будет неполным без небольшой музыки. В Animal Crossing есть поющая и играющая на гитаре собака по имени К.К. Слайдер, который создал довольно дискографию. Я хотел, чтобы пользователи могли вводить свои любимые песни, слушать их и видеть обложку альбома в правом верхнем углу экрана. Несмотря на то, что это не было основной целью моего проекта, это был интересный вызов!
Для этого проекта я использовал созданный фанатами ACNH API по адресу https://acnhapi.com и использовал данные их песен по адресу https://acnhapi.com/v1/songs специально для музыкального проигрывателя.
Я начал с создания музыкального проигрывателя без пользовательского ввода. Я хотел, чтобы моямоя любимая песня играла при первой загрузке страницы, поэтому я использовал «Drivin’» по умолчанию в начальном HTML-коде.
Я обернул все это в div с классом musicPlayer для удобства использования в дальнейшем и стилизации в CSS. Вверху у нас есть заголовок, изображение, взятое из API с альтернативным текстом, и элемент аудиоплеера. Самой сложной частью было изучение того, что такое звуковой элемент.
Далее мне нужно было добавить пользовательский интерактивный элемент. Я добавил форму в файл HTML над музыкальным проигрывателем:
Теперь пришло время взломать JS, чтобы форма на самом деле что-то делала. Я быстро понял, что не могу редактировать музыкальный проигрыватель, пока элементы музыкального проигрывателя еще не загружены, поэтому я обернул всю свою работу в событии DOM Content Loaded.
Затем я сделал переменную для формы запроса песни и добавил прослушиватель событий отправки. Я также использовал event.preventDefault(), чтобы остановить обновление страницы при отправке формы.
Затем мне пришлось сравнить каждую песню в ACNH API с запросом песни пользователя, чтобы найти совпадение. Для этого сначала мне нужно было получить каждую песню в API.
Как только я получил все песни, я преобразовал их из объекта в массив. Таким образом, я мог перебирать его, используя методы массива. Я также инициализировал переменную newSong, которую назначу позже в следующем цикле. Я использовал эту переменную newSong для простоты понимания при анализе собственного кода, но я не считаю, что это было строго необходимо.
Затем я прошелся по песням и вытащил английское название из данных песни, чтобы сравнить с вводом пользователя. Если английское название и ввод пользователя совпадали, я присваивал все данные песни переменной newSong. Затем я ввел имя новой песни, URL-адрес изображения и URL-адрес аудио из API в свою вспомогательную функцию. Наконец, я сбрасываю форму, чтобы пользователь мог снова изменить песню.
Вспомогательная функция changeSong предназначена исключительно для обновления DOM новой песней, введенной пользователем. Одной из проблем для меня был доступ к правильным дочерним узлам. Когда я регистрирую дочерние узлы div музыкального проигрывателя, появляется следующее:
Каким-то образом у этого div было СЕМЬ дочерних узлов, когда я вводил только три! Я узнал, что это произошло из-за разрывов строк в моем HTML-коде. Каждый раз, когда я нажимал клавишу ввода при вводе этого div, появлялся текстовый дочерний узел. Я не хотел удалять эти разрывы строк, так как это сделало бы мой код намного труднее для чтения, поэтому я просто получил доступ к соответствующим узлам по индексу и изменил значения на ввод вспомогательной функции.
Это функциональная часть музыкального проигрывателя, но ее все еще не было в правом верхнем углу страницы, как я хотел. Я также хотел, чтобы название, обложка альбома и аудиоплеер были аккуратно расположены на странице. Чтобы получить такой результат, мне пришлось добавить стили в CSS. Вы можете видеть, что когда я создавал каждый элемент в HTML, я также добавлял класс для целей стиля.
Во-первых, для музыкальной формы я установил верхнее и правое значения прямо в верхнем углу с минимальным отступом.
Затем для всего div музыкального проигрывателя я установил значения верхней и правой позиции, чтобы он был чуть ниже формы. Затем я сделал отображение сеткой, чтобы я мог расположить эти названия, обложки альбомов и аудиоэлементы так, как я хотел. Я добавил отступы, чтобы основные элементы на странице не перекрывали музыкальный проигрыватель. Наконец, я сделал текст по центру.
Затем я изменил размер обложки альбома и аудио, добавил их в соответствующие строки сетки отображения и отцентрировал в div музыкального проигрывателя. Я также добавил отступ к аудиоплееру, так как он располагался слишком близко к обложке альбома на странице.
И вот как я наконец получил это:
Я горжусь своим первым проектом в целом, но должен сказать, что самой захватывающей частью был этот музыкальный проигрыватель. Вы можете проверить мой код на https://github.com/gsambora/phase-1-project. Я надеюсь, что этот пост поможет вам создать свой собственный музыкальный плеер! Спасибо за прочтение :)
