Как создать виртуальное пианино

Пианино на JavaScript для Chrome

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

Зачем? Да про­сто так.

Логика работы

Про­ект состо­ит из трёх фай­лов: HTML-страницы, CSS-стилей и JS-скрипта.

HTML-страница отве­ча­ет за «мясо» про­ек­та: над­пи­си, заго­лов­ки, под­клю­че­ние зву­ков и сбор­ку все­го про­ек­та в одной точ­ке. Но стра­ни­ца сама по себе ниче­го не суме­ет: мы про­сто раз­ме­стим на ней нуж­ные бло­ки, а вся ани­ма­ция и пове­де­ние зада­ют­ся в двух дру­гих файлах.

CSS-стили реша­ют две зада­чи: оформ­ля­ют стра­ни­цу и рису­ют интер­фейс. Плав­ная ани­ма­ция нажа­тия и появ­ле­ния под­ска­зок про­пи­сы­ва­ют­ся имен­но здесь.

JS-скрипт зани­ма­ет­ся всей рабо­той пиа­ни­но: отсле­жи­ва­ет нажа­тия на кла­ви­ши, что­бы вклю­чить звук и пока­зать нуж­ный эффект на экране.

Созда­дим и напол­ним все три фай­ла по очереди.

❗️ Этот про­ект луч­ше все­го рабо­та­ет в бра­у­зе­ре Chrome и дру­гих бра­у­зе­рах с тем же движ­ком. В Сафа­ри звук почему-то игра­ет­ся с боль­шой задерж­кой и поль­зо­вать­ся пиа­ни­но нор­маль­но не полу­ча­ет­ся. Если раз­бе­рём­ся в чём дело, выпу­стим отдель­ную ста­тью на эту тему.

HTML-страница

Вот мини­маль­ный набор того, что нам нуж­но раз­ме­стить на странице:

1. Под­клю­чить файл со сти­ля­ми. На стар­те он может быть пустой, потом наполним.
2. Напи­сать заго­ло­вок и под­за­го­ло­вок, что­бы было понят­но, что здесь происходит.
3. Преду­смот­реть место для выво­да назва­ний нот.
4. Раз­ме­тить в бло­ках

Пер­вые три пунк­та про­стые, а вот в пунк­те 4 есть нюанс. Нам нуж­но раз­ме­стить кла­ви­ши так, что­бы у каж­дой кла­ви­ши были прописаны:

• код кла­ви­ши на кла­ви­а­ту­ре, кото­рая за неё отвечает;
• класс — это чёр­ная или белая кла­ви­ша на пианино;
• нота, кото­рая про­зву­чит при нажатии;
• бук­вен­ная под­сказ­ка, что­бы было понят­но, какая кла­ви­ша на кла­ви­а­ту­ре за что отве­ча­ет на пианино.

Сде­ла­ем это на бло­ках

data-key=»65″ ← код клавиши на клавиатуре компьютера

class=»key» ← это белая клавиша, у чёрных клавиш класс key sharp

data-note=»C» ← нота, которая появится на экране при нажатии

← класс оформления подсказки

A ← какую клавишу нужно нажать на клавиатуре

Если собрать всё вме­сте, полу­чит­ся так:

Аудио на стра­ни­це мы уже под­клю­ча­ли, когда дела­ли про­ект про «вжух» на любой стра­ни­це. Там при любом дви­же­нии мыш­кой запус­кал­ся звук остро­го меча — попро­буй­те сами открыть стра­ни­цу и подви­гать мышью.

Но в тот раз мы под­клю­ча­ли аудио вар­вар­ским спо­со­бом — через добав­ле­ние в коде скрип­та, пото­му что не было досту­па к стра­ни­це. Сей­час у нас есть пол­ный доступ, поэто­му аудио мож­но доба­вить так:

Обра­ти­те вни­ма­ние на свой­ство data-key — оно сов­па­да­ет со свой­ством у кла­ви­ши, кото­рую мы раз­ме­сти­ли в бло­ке

Таким же обра­зом нуж­но будет доба­вить все осталь­ные зву­ки. Что­бы всё рабо­та­ло быст­рее, мы поло­жим аудио­фай­лы в ту же пап­ку, что и HTML-документ. Эти фай­лы мы взя­ли у того же раз­ра­бот­чи­ка, у кото­ро­го ута­щи­ли и осталь­ной код — Кэро­лайн Габ­ри­ель .

Теперь собе­рём гото­вую стра­ни­цу. CSS- и JS-файлы мы ука­жем, но пока они будут пусты­ми, до них дой­дём на сле­ду­ю­щих этапах.

Настраиваем CSS-стили

Так как сти­ли хра­нят­ся в отдель­ном фай­ле style.css, сра­зу созда­дим его и про­пи­шем общие настрой­ки для всей стра­ни­цы, а так­же сти­ли заго­лов­ка и под­за­го­лов­ка. Ещё доба­вим отдель­ный стиль для внеш­не­го вида про­иг­ры­ва­е­мой ноты, кото­рая появ­ля­ет­ся над кла­ви­ша­ми пианино.

Сле­ду­ю­щий блок — настро­им внеш­ний вид всех кла­виш. У нас будут четы­ре раз­ных стиля:

1. Общие пра­ви­ла рас­по­ло­же­ния для все­го бло­ка кла­виш — раз­ме­ры бло­ка, поло­же­ние на стра­ни­це, пра­ви­ла для вло­жен­ных элементов.
2. Общие пра­ви­ла оформ­ле­ния для каж­дой кла­ви­ши — ради­ус скруг­ле­ния, гра­ни­цы, поря­док слоёв.
3. Два пра­ви­ла оформ­ле­ния отдель­но белых и чёр­ных клавиш.

Теперь под­сказ­ки — нам нуж­но раз­ме­стить каж­дую под­сказ­ку точ­но над сво­ей кла­ви­шей пиа­ни­но, поэто­му мы зада­ём про­цент сме­ще­ния для каж­дой из них от нача­ла бло­ка. Посмот­ри­те на уже зна­ко­мое свой­ство data-key — по нему сти­ли опре­де­ля­ют, какое сме­ще­ние к какой кла­ви­ше относится:

Послед­нее, что нам оста­лось тут сде­лать, — доба­вить ани­ма­цию. За это у нас будут отве­чать три бло­ка: пер­вый под­све­тит нажа­тую кла­ви­шу, вто­рой настро­ит кра­си­вое и плав­ное появ­ле­ние под­ска­зок, а тре­тий вклю­чит под­сказ­ки в нуж­ный момент:

Пишем скрипт

Созда­дим новый файл script.js и про­пи­шем три объ­ек­та, с кото­ры­ми будем работать:

Теперь сде­ла­ем основ­ную функ­цию, кото­рая вклю­чит опре­де­лё­ный звук в нуж­ный момент. Логи­ка будет такая:

1. Полу­ча­ем код нажа­той клавиши.
2. По это­му коду нахо­дим кла­ви­шу пиа­ни­но и добав­ля­ем ей ани­ма­цию нажа­тия. Заод­но берём из опи­са­ния кла­ви­ши текст ноты и пока­зы­ва­ем его на экране.
3. По это­му же коду нажа­той кла­ви­ши нахо­дим нуж­ный аудио­файл и про­иг­ры­ва­ем его.

Для вызо­ва функ­ции доба­вим в скрипт обра­бот­чик нажатий:

// отслеживаем нажатие каждой клавиши и сразу включаем звук

У нас есть ани­ма­ция нажа­тия — у кла­ви­ши появ­ля­ет­ся синий кон­тур и неболь­шая тень. Но нам нуж­но убрать этот эффект сра­зу, как он закон­чит отри­со­вы­вать­ся, что­бы кла­ви­ша как буд­то вер­ну­лась в исход­ное состо­я­ние. Для это­го доба­вим в скрипт такой код:

У нас оста­лась толь­ко ани­ма­ция под­ска­зок над кла­ви­ша­ми. Мы не запу­стим её из само­го скрип­та, зато можем доба­вить каж­дой под­сказ­ке своё вре­мя задерж­ки. Это даст эффект плав­но­го появ­ле­ния. Чем пра­вее кла­ви­ша пиа­ни­но, тем боль­ше её поряд­ко­вый номер, а зна­чит, и вре­мя появ­ле­ния на экране:

Теперь мож­но собрать все фай­лы вме­сте и послу­шать, как зву­чит наше пиа­ни­но, на стра­ни­це про­ек­та.

Таким же обра­зом мож­но сде­лать и дру­гие вир­ту­аль­ные инстру­мен­ты — бара­ба­ны, элек­трон­ный сем­плер или что угод­но ещё. Зай­мём­ся этим в сле­ду­ю­щий раз.

Источник

Виртуальное пианино

Играть на пианино онлайн

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

Нажмите «Скрыть названия нот» над пианино, чтобы скрыть названия нот. Нажмите «Отметить», чтобы отметить ноты на пианино при нажатии на них. Воспроизведите отмеченные ноты, нажав кнопку «Играть» или нажав пробел на клавиатуре.

Вы можете сохранить свои отметки на пианино, скопировав веб-адрес в окне браузера. Это также позволяет вам делиться своими отметками с другими. Например, вот Фа минор септаккорд и Ми мажор .

Бесплатные интерактивные упражнения на пианино

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

Источник

Пианино онлайн: учимся играть на виртуальном инструменте

Игре на пианино научиться за неделю, месяц или год невозможно. Тем более эта задача становится невыполнимой, если нет возможности музицировать, к примеру, из-за отсутствия в доме соответствующего музыкального инструмента. Но с нынешними гаджетами и новинками невозможное становится вполне реальным. Пианино онлайн – вот отличное решение для тех, кто давно хотел попробовать играть любимые мелодии, но не делал это по разным веским причинам. Что же представляет собой виртуальное пианино?

Мини пианино онлайн:

Чтобы увидеть привязку клавиш к кнопкам клавиатуры нажмите на пункт «Кнопки клавиатуры» на пианино.

По умолчанию это кнопки: q, w, e, r, t, y, u, i, o, p, g, h, j, k, l, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0

Пианино онлайн с нотами:

Краткое описание инструмента

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

Каждая клавиша пианино онлайн — с подсказками: они обозначены названием ноты, которой соответствуют. Например, нота «до» обозначена, как С, «ре» — D, «ми» -E, «фа» -F, «соль» -G, «ля» -A, «си» -B (белые клавиши). Черные клавиши обозначены теми же буквами, но с решеткой — #, что означает повышение основной ноты на полтона: до-диез, ре-диез, фа-диез и т.д.

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

Обучение или развлечение?

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

Источник

виртуальное пианино онлайн на клавиатуре

одиночные ноты или аккорды можно играть на клавиатуре или мышью (семь октав)

Играйте на клавиатуре компьютера, чтобы играть на клавиатуре пианино онлайн

На этом cимуляторе пианино можно играть онлайн бесплатно. Нажмите клавиши на клавиатуре компьютера или нажмите на клавиши фортепианной клавиатуры, чтобы играть на этом виртуальном пианино. Каждую ноту на клавиатуре пианино от C₃ до C₅ можно воспроизвести, нажав соответствующую клавишу на клавиатуре компьютера. Например, C₃ воспроизводится нажатием Tab, C#₃ — нажатием 1, а D₃ — нажатием клавиши Q и так далее. Обратите внимание, что A#₄ воспроизводится нажатием клавиши Backspace, B₄ клавиши бэкслеш, а C₅ клавиши Enter.

Воспроизведение любых аккордов на клавиатуре компьютера

Клавиши на клавиатуре компьютера из строки A,S,D и строки Z,X,C запрограммированы на воспроизведение аккордов, сформированных из белых клавиш фортепиано, для создания более насыщенных мелодий. Кроме того, любая клавиша клавиатуры компьютера может быть настроена для воспроизведения любого аккорда или отдельной ноты. Включите флажок АККОРД, чтобы указать аккорд на клавиатуре пианино, а затем выключите его, чтобы создать кнопку для этого аккорда. Эта кнопка будет воспроизводить ваш аккорд, но также может быть настроена так, чтобы быть связанной с выбранной клавишей клавиатуры компьютера.

Запись и воспроизведение

Вы можете записывать все, что играет эта виртуальная клавиатура пианино, и воспроизводить ее по своему усмотрению. Чтобы начать и остановить запись, включите и выключите флажок ЗАПИСЬ. Кнопка воспроизведения появится автоматически. У вас может быть много кнопок воспроизведения: каждая со своей собственной записью. Вы можете даже воспроизводить несколько записей одновременно, делая другую запись, чтобы объединить их.

Сохраните свою работу

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

Источник

Пианино онлайн

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

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

Как научиться играть на фортепиано онлайн?

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

• Классическая, включённая по умолчанию. Длина – 2,5 октавы. Чтобы перейти к следующим, нужно нажать на «Сдвинуть раскладку». Порядок клавиш реалистичен, что помогает быстро адаптироваться.
• Вторая раскладка, охватывающая 5 октав. В этом случае клавиши расположены иначе, отлично от традиционного фортепиано. Чтобы использовать чёрные, необходимо зажимать SHIFT на клавиатуре.

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

За нотным дисплеем следует индикатор звука, где можно увидеть спектральный рисунок. С правой стороны расположен регулятор громкости, с его помощью вы можете отрегулировать звук.

В случае отсутствия звука, высока вероятность, что отключены колонки или есть более серьёзная проблема с Вашим ПК. Рекомендуется включить музыку на устройстве.

Источник