На нашем пианино пользователи могут воспроизводить различные мелодии, нажимая на клавиши самого онлайн-пианино или используя клавиши клавиатуры. Они также могут регулировать громкость и отображать или скрывать клавиши быстрого доступа на музыкальном инструменте. Благодаря своей отзывчивости это пианино также без проблем работает на сенсорных устройствах, таких, например, как телефоны.
Шаги по созданию играбельного пианино на JavaScript
Чтобы создать виртуальное пианино с помощью HTML, CSS и JavaScript, выполните указанные шаги поочередно:
- Создайте папку проекта (вы можете назвать ее как пожелаете) и поместите в нее файлы, перечисленные ниже:
- index.html. Имя файла должно быть index и его расширение .html,
- style.css. Имя файла должно быть style, а его расширение — .css,
- script.js. Имя файла должно быть script и его расширение — .js;
- Загрузите файл itunes folder для пианино с Яндекс Диска и поместите его в ту же папку проекта.
itunes folder
В первую очередь вставьте в файл index.html следующие строки кода:
Во-вторых, вставьте следующие таблицы стилей в файл style.css:
Наконец, последний шаг — вставьте следующие строки кода в ваш файл script.js (мы написали комментарии к каждой строке JavaScript, чтобы вы могли легко понять, какая строка что делает).
Вот и все — теперь вы успешно создали игровое пианино с помощью HTML, CSS и JavaScript. Если вы столкнулись с какими-либо проблемами или ваш код не работает должным образом, вы можете загрузить файлы исходного кода для этого проекта, нажав соответствующую кнопку загрузки. Это совершенно бесплатно, будет загружен zip-файл, содержащий папку проекта с файлами исходного кода.
