Драм-машина и музыкальная студия в браузере

Что получится

Восемь больших кнопок: бочка, малый барабан, хай-хэт, хлопок, тарелка, том, колокольчик и «бип». Нажимаешь — кнопка вспыхивает и звучит. Никаких звуковых файлов: ИИ пишет код, который рисует звук прямо в браузере. Пример выше — это уже уровень 2: студия со струнами и кодом мелодии. На компьютере играй клавишами — они подписаны на кнопках. Нажми «Играть в пример» и включи звук.

Шаги

1. Открой gemini.google.com. Младше 13 — вместе с родителем, на его устройстве.

2. Скопируй промпт целиком и отправь:

   Сделай драм-машину для телефона в одном HTML-файле. Не подключай ничего из интернета: никакого Tailwind, CDN, шрифтов и звуковых файлов — все звуки создай сам через Web Audio API в JavaScript. Не сохраняй ничего в памяти браузера. На экране 8 больших цветных кнопок: бочка, малый барабан, хай-хэт, хлопок, тарелка, том, колокольчик и смешной «бип». При нажатии кнопка вспыхивает и играет свой звук. На компьютере кнопки можно нажимать клавишами 1–8. Покажи результат в Canvas.
   

3. Подожди около минуты, нажми Предпросмотр (Preview). Если появится кнопка «Включить звук» или «Старт» — нажми её: браузеры дают играть звук только после первого нажатия.

4. Проверь ИИ (вопрос ниже).

5. Нажми Скачать (Download; иногда это меню Экспортировать) — файл откроется в любом браузере.

Уровень 2: музыкальная студия

Открой новый чат (так надёжнее, чем много правок подряд) и отправь:

Сделай музыкальную студию для телефона в одном HTML-файле. Не подключай ничего из интернета: никакого Tailwind, CDN, шрифтов и звуковых файлов — все звуки создай сам через Web Audio API в JavaScript. Не сохраняй ничего в памяти браузера. Наверху 12 цветных кнопок-барабанов: бочка, малый барабан, хай-хэт, хлопок, тарелка, том, колокольчик, бип, лазер, гонг, «мяу» и взрыв. При нажатии из кнопки разлетаются цветные искры. Ниже 8 струн — отдельные кнопки с нотами до, ре, ми, фа, соль, ля, си, до2: звучат как гитара и дрожат при нажатии. На каждой кнопке маленькая подпись клавиши: бочка — 1, малый барабан — 2, хай-хэт — 3, хлопок — 4, тарелка — 5, том — 6, колокольчик — 7, бип — 8, лазер — 9, гонг — 0, «мяу» — Q, взрыв — W; струны до, ре, ми, фа, соль, ля, си, до2 — A, S, D, F, G, H, J, K. На компьютере эти клавиши играют свои звуки, на телефоне — касание. Внизу поле «Код мелодии»: всё, что я нажимаю, сразу дописывается туда словами через пробел, например «бочка до ми соль хлопок». Кнопка «Сыграть» проигрывает по порядку то, что написано в поле, — его можно исправить руками. Кнопка «Очистить» стирает поле. Покажи результат в Canvas.

Мелодия — это код. Сыграй что-нибудь, и в поле появятся слова. Теперь поменяй их руками и нажми «Сыграть». Попробуй начало песенки «Братец Яков»:

до ре ми до до ре ми до ми фа соль

Скопируй свой код и отправь другу — у него в студии зазвучит то же самое.

Поменяй промпт

Перед отправкой замени несколько слов — получится твоя версия. Меняй только слова, а правила про интернет и Canvas оставь.

• «смешной «бип»» → «смешное «мяу»»
• в студии: «гонг, «мяу» и взрыв» → «гонг, «гав» и лазерный выстрел»
• в студии: «звучат как гитара» → «звучат как арфа»

Сделай драм-машину своей

• Добавь кнопку «Ритм», которая сама играет простой бит бочкой, малым барабаном и хай-хэтом, пока я не нажму её ещё раз. Остальное не меняй.

Потом попробуй своё: замени «бип» на звук лазера, поменяй цвета, сделай 12 кнопок.

Если не получается

• Нет звука? Проверь, что телефон не на беззвучном режиме, и нажми кнопку «Старт», если она есть.
• После 3–4 правок подряд Gemini иногда пишет «[generated with web_code_canvas tool]» вместо программы. Открой новый чат и отправь промпт уровня 2 целиком.
• ИИ пишет, что всё поменял, а драм-машина прежняя? Так бывает. Напиши: Ничего не поменялось. Покажи обновлённую драм-машину в Canvas.
• Нет кнопки «Предпросмотр» (Preview)? Напиши: Покажи результат в Canvas.