Дата проекта: март 2023 г.

Ваша роль: индивидуальный проект

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

Проект Jamboree Jukebox требовал создания музыкального автомата, построенного с использованием Itunes, HTML, CSS и Javascript.

Вызов:

Задача этого проекта состояла в том, чтобы создать функциональный музыкальный автомат из скудной отправной точки. Задача этого проекта заключалась в том, чтобы взять предоставленную ссылку, найти музыку, которую мы хотели показать, интегрировать ее в наш код, а затем использовать HTML, CSS и Javascript, чтобы сделать Jukebox одновременно функциональным и уникальным. Это был наш первый Javascript-проект в NMIX 6020.

Решение:

Опишите свой метод или процесс создания этого проекта, как вы решили конкретные проблемы из предыдущего раздела, и опишите «почему» за вашими решениями по проектированию/разработке. Это самый длинный раздел, в который вы включите большую часть документации по процессу (визуальные изображения) и основные моменты из окончательного результата.

Я начал создавать этот проект с создания папки, в которой я создал два файла: «jukeboxjamboree.html» и файл Javascript с именем «jukescrpit.js». Я вставил стартовый код из задания в свой файл и начал искать музыку для показа. Я решил поработать с Морганом Валленом, популярным кантри-исполнителем. Я взял ссылки на каждую песню с предоставленного веб-сайта и использовал Javascript, изображенный ниже, чтобы ввести аудио, обложку альбома, название песни и исполнителя в набор данных под названием «песни». Создание этого набора названий песен, изображений, заголовков и т. д. вызывается с использованием HTML и, в конечном счете, обеспечивает работу музыкального автомата.

Чтобы вызвать данные, которые я ввел в свой файл Javascript, мне пришлось расширить предоставленный HTML. В качестве отправной точки мне дали следующий код:

‹button onclick="player('bb.m4a')"›воспроизвести песню‹/button›
‹div id="juke"›‹/div›

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

На изображении показана функция, которую я использовал, ‹button onclick= “player()”›. Эта функция не только служит визуальным маркером и физической кнопкой для каждой песни в музыкальном автомате, но также показывает, как я ссылался на каждую из своих записей песни в Javascript, используя круглые скобки (которые относятся к ее порядку в наборе данных).

Следующей частью моего проекта была стилизация страницы. Я использовал внутренний CSS в разделе ‹head›‹/head› моей HTML-страницы между тегами ‹style› ‹/style›.

Я использовал эффекты CSS и Javascript, чтобы добиться эффекта свечения за словом «Jukebox», и создал кнопку, позволяющую изменять цвет фона одним нажатием кнопки. Используя ряд идентификаторов и классов, я смог сгруппировать и стилизовать элементы моей страницы. Я также смог использовать Javascript для создания эффекта вращения обложек альбомов (чтобы воспроизвести вращение пластинки на проигрывателе).

Ниже приведено изображение, показывающее некоторые элементы CSS, которые я использовал для своего проекта музыкального автомата:

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

Ссылка: https://jasonmarcus.net/em/6020/jukebox/jamboreejukebox.html

Результаты:

Этот проект помог мне укрепить мои навыки работы с Javascript, а также позволил использовать творческий процесс для создания функционального и креативного конечного продукта. Музыкальный автомат включает значительное количество Javascript, HTML и CSS. Задача этого проекта музыкального автомата заключалась в том, чтобы взять базовый код, который был предоставлен, добавить к нему и сделать его своим. Этот проект помог мне понять Javascript, который в то время был для меня совершенно новым языком. Если бы в будущем мне пришлось делать еще один музыкальный автомат, я бы использовал больше javascript для дальнейшей анимации своего музыкального автомата.

Темы: