Звуковое приложение клавиатуры: HTML-CSS-JavaScript
По выходным хобби более функционально, чем в загруженные будни. С этим в некоторой степени связана и начальная история этого поста.
Как это?
Когда неумение моего старшего сына играть на ней немного расстраивало его, мне пришла в голову идея разработать хотя бы простое приложение, в котором он мог бы играть самостоятельно.
Вот специальная статья на эти выходные прямо здесь.
Самая важная особенность ней-инструмента - это издавать звук. Однако это не всегда может быть правильным началом. Могу сказать, что ушам и рукам необходимо долгое время проводить с этим инструментом после того, как мне удастся издать звук. Но, по крайней мере, я уверен, что вам понравится этот инструмент больше, когда вы наберетесь смелости издать звук.
Я записал аудиофайлы, которые играл в проекте, не более 1 секунды. И я хотел, чтобы они были включены в код с их оригинальными именами. Я надеюсь, что эта статья будет полезна для вас, чтобы развить как ваш интерес к этому инструменту, так и вашу идею выполнения такой работы с javascript.
Удачного чтения && кодирования…
Шаги проекта:
1. Воспроизведение мелодий отдельно для 2-й, 3-й и 4-й ступеней с ней. Всего у нас 21 мелодия.
a. Звукозапись. Мы воспроизвели 21 звуковой тип, известный как мелодия на инструменте Ней, и записали их на нашем собственном компьютере. Да, это те мелодии, которые должны получиться настоящими, и результат будет положительным после нескольких попыток перед редактированием. ✔
б. Операции редактирования: мы не хотим, чтобы первые сделанные нами звукозаписи были аудиофайлами. Файлы Waw могут не быть предпочтительными при веб-разработке, хотя звуковые файлы в этом проекте не очень большие. Поскольку файлы mp3 занимают меньше места. Файлы Wav обычно используются, когда требуется лучшее качество звука.
c. Хранение: Наконец, чтобы не смешивать с аудиофайлами, мы храним мелодии 2-й, 3-й и 4-й степени отдельно и сохраняем их адаптированными к проекту.
2. Создание подходящей страницы для одностраничного приложения в Figma.
а. Просмотрите веб-сайты, связанные с музыкой:
Да, давайте перейдем к Фигме. На данный момент нет никаких сомнений в том, что дизайн - одна из самых запутанных вещей для тех, кто хочет разработать продукт в Интернете. Figma и подобные приложения фактически вносят вклад в базовый шаблон проекта перед тем, как начать код.
Совет:
- Возможно, вам понадобится вдохновение для дизайна. Затем вы можете вдохновиться существующими инструментами или веб-сайтами, посвященными музыке.
- Вы можете выбрать фоновое изображение, которое выделит используемый вами инструмент.
- Что касается типографики, вы можете посмотреть, какие шрифты в основном используются, выполнив поиск в Google по названиям музыки и инструментов. Поиск шрифтов Google - хорошая цель для этого. Кроме того, когда вы найдете понравившийся шрифт на других сайтах, вы можете использовать Fonts Ninja, один из плагинов для Chrome. Он скажет вам, какой шрифт вам нравится.
3. Структура кода HTML.
Чтобы не сильно усложнять проект, в качестве неотложного решения создадим структуру HTML-кода в соответствии с одностраничным веб-приложением. Для этого наши элементы будут такими:
- h1 (заголовок)
- h3
- кнопка
- нижний колонтитул
В общем, эти элементы будут выполнять нашу работу по созданию структуры, аналогичной простой композиции, которую я пытался создать в Figma.
4. Интеграция дизайна в Figma с CSS.
Одна из самых забавных причин для создания дизайна в Figma заключается в том, что она предлагает вам правильные советы по CSS, когда вы начинаете писать код. Таким образом, когда вы занимаетесь дизайном, он никогда не может превратиться для вас в пустую трату времени.
Получить коды CSS в Figma очень просто. Все, что вам нужно сделать, это щелкнуть созданный вами элемент и выбрать CSS на вкладке «Код» на правом экране. Достаточно будет сохранить коды здесь, в файле CSS, в папке вашего проекта.
5. Создайте код для интерактивного веб-приложения.
Вы можете создать веб-страницу с помощью HTML и CSS. Однако JavaScript играет большую роль в том, чтобы сделать их более значимыми. Вы можете начать использовать многие функции, передав функции кнопкам в интерактивном приложении.
a. Связывание кнопок со звуковыми файлами:
Чтобы связать сочетания клавиш, которые я считал кнопками в части дизайна, со звуковыми файлами, которые я записал, нам нужна была структура кода, подобная следующей:
function makeSound(key) {
switch (key) {
//2-voices
case "Y":
var neva2 = new Audio("sounds/2-voices/Neva (Re).mp3");
neva2.play();
break;
b. Используя addEventListenerfrom манипуляции с DOM, мы можем сказать, какие функции он может запускать с помощью сочетания клавиш:
document.addEventListener("keypress", function(e) {
makeSound(e.key);
buttonAnimation(e.key);
});
c. Кнопки, которые при нажатии в течение определенного периода времени выглядят иначе:
Благодаря вызову функции мы можем изменить вид клавиши, нажатой на клавиатуре, в течение определенного периода времени. setTimeout будет полезен для указания времени здесь.
Здесь мы также можем сказать, что делать через некоторое время с помощью setTimeout. Здесь в качестве примера мы указали в функции, что кнопка будет неактивной при вызове встроенной функции удаления. Итак, давайте посмотрим на это в коде:
function buttonAnimation(currentKey) {
var activeButton = document.querySelector("." + currentKey);
activeButton.classList.add("pressed");
setTimeout(function() {
activeButton.classList.remove("pressed");
}, 200);
И Бинго!
Теперь, когда наши файлы index.html, styles.css, и index.js готовы, пора просмотреть их все вместе.
Хорошая клавиатура :)
Предложение по развитию проекта:
При желании вы можете продвигать проект дальше, внося следующие дополнения. Просто клонируйте и кодируйте из Github 👇
- Добавьте новую функцию с помощью кода JavaScript для сохранения воспроизводимой музыки в веб-приложении.
- Получите запись для загрузки на локальный компьютер.
- Покажите это с помощью отдельной функции просмотра, пока запись воспроизводится в Интернете.
- Добавьте подходящее дополнение к кнопке «Подробнее» о том, что делают клавиши.
