Онлайн-музыкальный автомат, воспроизводящий мою любимую музыку с помощью Javascript.

Дата проекта:

март 2023 г.

Роль:

Н/Д (индивидуальный проект)

Обзор проекта:

Для пятого задания/проекта в моем курсе Advanced Web Development мне дали доступ к библиотеке iTunes и поручили создать мой собственный цифровой музыкальный автомат. Помимо необходимых требований по использованию 30-секундных аудиофайлов m4a и эскизов песен по моему выбору, HTML, CSS и Javascript, рекомендации были довольно открытыми с точки зрения направления, масштаба и эстетики конечного результата. Опираясь на все, чему я научился на этом занятии, музыкальный автомат стал захватывающей, но разумной задачей, дав мне возможность проверить свои навыки.

Соревнование:

Первоначальная проблема, связанная с этим заданием, заключалась в том, что инструкции были очень широкими; всего несколько строк кода были даны в качестве отправной точки. В результате следующей неотъемлемой задачей было создание чего-то отличного от работ моих одноклассников. Что касается конкретных вещей, с которыми я столкнулся во время работы над музыкальным автоматом, большинство препятствий, с которыми я столкнулся, были связаны не только с Javascript, но и с CSS. Как только мне удалось заставить музыку работать должным образом, я сосредоточился на том, чтобы музыкальный автомат выглядел так, как я хотел. Мои цели в этом отношении заключались в том, чтобы всплывающее окно появлялось только при нажатии кнопки песни, а также включение названия песни и исполнителя во всплывающее окно после выбора каждой песни.

Решение:

По общему признанию, когда я потом смотрел на готовые продукты моих сверстников, мой музыкальный автомат был относительно прост. Частично это было связано с моей целью иметь простую в использовании функциональность, а также из-за ограниченности моих навыков веб-разработки на тот момент. Я опасался делать слишком много, чтобы изменить свой Javascript, так как боялся зайти слишком далеко и сделать что-то, что случайно помешало бы музыке и изображениям пройти. Эстетически я хотел, чтобы внешний вид музыкального автомата отражал мой музыкальный вкус, соответствующий выбору песен 1960–1970-х годов. Вот почему я выбрал фоновое изображение секции классического рока в музыкальном магазине, а также винтажный шрифт с засечками для всей копии.

Выбрав песню, я хотел, чтобы она выделялась на фоне фонового изображения и была представлена ​​так, чтобы пользователь чувствовал себя интерактивным. Это оказалось простым исправлением CSS, чтобы соответствовать стилю моего заголовка. Тем не менее, ключевая строка кода «display: none» — это то, что позволило мне реализовать критическую функцию — всплывающее окно появлялось только после выбора песни.

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

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

Хотя я понимаю, что, возможно, я не продвинулся в этом проекте так далеко, как некоторые другие студенты, я поставил перед собой определенные цели относительно того, что я хотел сделать с ним, и я горжусь тем, что смог достичь этих конкретных целей. Созданный с нуля, функционирующий должным образом и выглядящий отточенным, мой музыкальный автомат — это то, что я с удовольствием продемонстрирую в будущем.

Полученные результаты:

Как я упоминал выше, я доволен успехом своего музыкального автомата как с точки зрения личного роста как веб-разработчика, так и как студента этого курса (выполнение требований задания и получение хорошей оценки). Приняв участие в этом упражнении, я лучше понял прямую и совместную связь между HTML и Javascript, а также некоторые нематериальные преимущества, такие как понимание того, когда обращаться за помощью, и осознание ограничений моего личного набора навыков. Размышляя о том, как улучшить этот музыкальный автомат в будущих итерациях, я потенциально мог бы включить функцию перемешивания между различными песнями, раскрывающееся меню со списком песен или ряд кнопок «предыдущая» и «следующая», позволяющих пользователю чтобы воспроизводить песни напрямую, вместо того, чтобы нажимать для каждой отдельную кнопку. Учитывая текущее состояние моего музыкального автомата и открытый характер подсказки, есть бесконечные возможности для дополнительной работы, особенно если я решу расширить ее для моего последнего проекта в этом курсе. Завершение этого тематического исследования позволило мне поразмышлять о моем творческом процессе и получить более конкретное и осмысленное представление о текущем состоянии моего пути веб-разработки.