Музыкальный автомат, который может воспроизводить 30-секундные сэмплы из альбома Mamma Mia!

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

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

Обзор проекта. Для этого задания нам дали задание создать музыкальный автомат с использованием HTML, Javascript и CSS.

Задача: В прошлом семестре в NMIX 6010 нам также пришлось построить музыкальный автомат, но большая его часть уже была настроена для нас. Для этого класса нужно было начать с гораздо меньшего, и пришлось строить оттуда, но на этот раз с использованием большего количества Javascript, что не является моей сильной стороной. В ходе этого проекта были моменты, когда мне приходилось менять направление, в котором я хотел двигаться, потому что я так расстраивался, пытаясь понять, как заставить мой музыкальный автомат правильно работать с javascript.

Решение. Я начал проект с создания трех отдельных файлов; HTML, CSS и Javascript. Затем я вставил начальный код проекта в свой HTML-файл. Я хотел создать музыкальный автомат для моих любимых песен из Mamma Mia, после того, как я собрал изображения и аудиофайлы для этих песен, я сохранил их в файле Javascript. Изначально я хотел создать музыкальный автомат, в котором можно было бы переключаться между песнями вперед и назад, но я не мог этого понять. В итоге я создал представление, в котором вы можете увидеть все песни сразу и нажать на ту, которую хотите прослушать.

Чтобы песни воспроизводились при нажатии, я использовал внутренний код js:

пусть аудиоЭлемент; function player(tune) { audio.innerHTML = «‹audio autoplay src=» + tune + «type=’audio/m4a’ id=’song’›‹/audio›»; audioElement = document.querySelector('#song'); }

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

function togglePlay() { if (audioElement.paused) { audioElement.play(); document.querySelector('#play').innerHTML = "‹i class='fa fa-pause'›‹/i›»; } иначе { audioElement.pause(); document.querySelector(‘#play’).innerHTML = «‹i class=’fa fa-play’›‹/i›»; } }

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

Это финальный продукт моего проекта Jamboree Jukebox: https://catherinetran.reclaim.hosting/em/webdev/NMIX6020/week10/jukebox/juke1.html.

Результаты. Этот проект помог мне немного лучше понять Javascript, но я верю, что смогу создать лучший музыкальный автомат с гораздо большим количеством функций, используя Javascript, и для моего последнего проекта я собираюсь сделать именно это.