Проект "Музыкальный плеер"

Цель: Создать приложение для воспроизведения музыки с функциями выбора песен, управления воспроизведением и регулировкой громкости.

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

Чему вы научитесь:

  • Добавлять и воспроизводить аудиофайлы
  • Создавать кнопки управления воспроизведением
  • Работать со списками песен
  • Реализовывать регулировку громкости
  • Создавать циклическое переключение песен
1
Подготовка ресурсов
2
Создание интерфейса
3
Настройка списка песен
4
Программирование функций
5
Тестирование плеера

Шаг 1: Подготовка аудио ресурсов

  • Откройте MIT App Inventor и создайте новый проект с названием "MusicPlayer".
    • Создать приложение
  • Нам понадобятся аудиофайлы для воспроизведения. В панели "Palette" (Палитра) найдите раздел "Media" (Медиа).
  • Перетащите компонент Player (Проигрыватель) на экран. Этот компонент появится в разделе "Non-visible components" (Невидимые компоненты).
    • Добавление проигрывателя
  • Для этого проекта мы будем использовать три песни:
    • song1.mp3 - "Энергичная"
    • song2.mp3 - "Спокойная"
    • song3.mp3 - "Веселая"
  • Загрузите аудиофайлы в проект:
    1. Скачайте все три песни из нашего центра загрузок в разделе "Музыка для проектов"
    2. Распакуйте ZIP-архив с песнями
    3. В MIT App Inventor нажмите на "Upload File..." (Загрузить файл...) в разделе "Media" (Медиа)
    4. Выберите и загрузите все три MP3-файла
    • Загрузка аудиофайла
  • После загрузки вы увидите все три аудиофайла в списке медиа-ресурсов. Убедитесь, что имена файлов совпадают с теми, что будут использоваться в коде: song1.mp3, song2.mp3 и song3.mp3.
Специально подготовленные файлы: Мы подготовили три оптимизированные песни для этого проекта, которые имеют небольшой размер и идеально подходят для использования в MIT App Inventor. Скачайте их в нашем центре загрузок в разделе "Музыка для проектов".
Важно: Используйте именно файлы song1.mp3, song2.mp3 и song3.mp3, чтобы код из следующих шагов работал корректно без необходимости изменений. Если вы решите использовать свои аудиофайлы, убедитесь, что вы соответственно изменили их имена в блоках программирования.

Шаг 2: Создание интерфейса плеера

  • Создадим интерфейс нашего музыкального плеера, начиная с основного контейнера:
    1. В разделе Layout (Макет) найдите компонент VerticalArrangement
    2. Перетащите его на экран приложения
    3. В свойствах установите Width (Ширина) и Height (Высота): Fill parent
    4. В BackgroundColor выберите приятный цвет фона (например, светло-синий или серый)
    • Добавление вертикального расположения
  • Добавим заголовок плеера:
    1. Из раздела User Interface перетащите компонент Label в VerticalArrangement1
    2. В свойствах установите Text: "Мой музыкальный плеер"
    3. Установите TextColor: контрастный к фону цвет
    4. Установите FontSize: 20 и FontBold: True
    5. Установите TextAlignment: Center
    • Добавление заголовка плеера
  • Добавим надпись для отображения текущей песни:
    1. Перетащите еще одну Label в VerticalArrangement1 под заголовком
    2. В свойствах установите Text: "Сейчас играет: ничего не выбрано"
    3. Установите Width: Fill parent и TextAlignment: Center
    4. Установите FontSize: 16
    • Добавление метки текущей песни
  • Создадим панель с кнопками управления:
    1. Из раздела Layout перетащите HorizontalArrangement в VerticalArrangement1
      2. Добавление панели с кнопками управления
    2. Установите Width: Fill parent и AlignHorizontal: Center
    3. Из раздела User Interface перетащите три Button в HorizontalArrangement1
      4. Добавление кнопок управления
  • Настроим кнопки управления:
    1. Кнопка 1 (предыдущая песня): Text: "◀", Width: 60, FontSize: 20
    2. Кнопка 2 (воспроизведение/пауза): Text: "▶", Width: 60, FontSize: 20
    3. Кнопка 3 (следующая песня): Text: "▶▶", Width: 60, FontSize: 20
  • Добавим ползунок громкости:
    1. Из раздела User Interface перетащите компонент Slider в VerticalArrangement1
    2. Установите Width: Fill parent
    3. Установите MinValue: 0, MaxValue: 100, ThumbPosition: 50
    • Добавление ползунка громкости
  • Наконец, добавим список песен:
    1. Из раздела User Interface перетащите компонент ListView в VerticalArrangement1
    2. Установите Width: Fill parent и Height: 200
    3. Установите BackgroundColor - выберите контрастный к фону цвет
    • Добавление списка песен
Совет по дизайну: Вместо символов можно использовать иконки для кнопок, загрузив их как изображения и установив в свойстве Image кнопок. Также можно добавить небольшие отступы между элементами, настраивая свойство Margin.

Шаг 3: Настройка списка песен

  • Перейдите во вкладку Blocks (Блоки) для программирования логики приложения.
    • Переход на вкладку Blocks
  • Создадим блок инициализации, который будет выполняться при запуске приложения:
    1. В левой панели найдите компонент Screen1
    2. Выберите блок when Screen1.Initialize
    3. Перетащите этот блок в рабочую область
    • Блок инициализации экрана
  • Создадим список названий песен:
    1. В левой панели выберите категорию Variables
    2. Найдите блок initialize global name to
    3. Перетащите блок в рабочую область (не обязательно внутрь блока initialize)
    4. Измените имя переменной на songsList
  • Заполним список названиями песен:
    1. В категории Lists найдите блок make a list
    2. Перетащите блок в поле значения переменной songsList
    3. Нажмите на синий значок "+" на блоке make a list нужное количество раз, чтобы добавить поля для всех ваших песен
    4. В категории Text выберите текстовый блок (кавычки)
    5. Заполните текстовые блоки названиями песен (например: "Песня 1 - Название", "Песня 2 - Название", "Песня 3 - Название")
    • Создание списка песен
  • Аналогично создадим список путей к файлам песен:
    1. Снова воспользуйтесь блоком initialize global name to
    2. Назовите переменную songPaths
    3. Создайте список с помощью блока make a list
    4. Заполните список именами MP3-файлов, которые вы загрузили (например: "song1.mp3", "song2.mp3", "song3.mp3")
    • Создание списка путей к файлам
  • Создадим переменную для хранения индекса текущей песни:
    1. Добавьте еще один блок initialize global name to
    2. Назовите переменную currentSongIndex
    3. Установите начальное значение равным 1 (в MIT App Inventor индексы списков начинаются с 1)
    • Инициализация текущего индекса
  • Теперь добавим код инициализации в блок when Screen1.Initialize:
    1. Заполним ListView1 названиями песен:
      • В категории ListView1 найдите блок set ListView1.Elements to
      • Перетащите этот блок внутрь блока when Screen1.Initialize
      • В поле значения перетащите переменную global songsList из категории Variables
  • Установим начальный источник для Player1:
    1. В категории Player1 найдите блок set Player1.Source to
    2. Перетащите этот блок внутрь блока when Screen1.Initialize под предыдущим блоком
    3. В категории Lists найдите блок select list item
    4. Перетащите этот блок в поле значения set Player1.Source to
    5. В первое поле блока select list item перетащите global songPaths
    6. Во второе поле перетащите global currentSongIndex
  • Установим начальный текст для метки текущей песни:
    1. В категории Label2 найдите блок set Label2.Text to
    2. Перетащите этот блок внутрь блока when Screen1.Initialize под предыдущими блоками
    3. В категории Text найдите блок join
    4. Перетащите блок join в поле значения set Label2.Text to
    5. В первое поле блока join введите текст "Сейчас играет: "
    6. Во второе поле перетащите блок select list item
    7. В блоке select list item: в первое поле - global songsList, во второе - global currentSongIndex
    • Установка начального текста метки
Важно! Порядок песен в списке songsList должен точно соответствовать порядку файлов в списке songPaths. Например, если "Песня 1" находится на первой позиции в songsList, то "song1.mp3" должен быть на первой позиции в songPaths.

Шаг 4: Программирование функций управления

  • Программирование выбора песни из списка:
    1. В левой панели найдите компонент ListView1
    2. Выберите блок when ListView1.AfterPicking
    3. Перетащите этот блок в рабочую область
    4. Этот блок активируется, когда пользователь выбирает песню из списка
  • Обновление индекса текущей песни:
    1. В категории Variables найдите блок set global currentSongIndex to
    2. Перетащите этот блок внутрь блока when ListView1.AfterPicking
    3. В категории ListView1 найдите блок ListView1.SelectionIndex
    4. Перетащите его в поле значения set global currentSongIndex to
  • Установка источника для воспроизведения:
    1. В категории Player1 найдите блок set Player1.Source to
    2. Перетащите этот блок внутрь блока when ListView1.AfterPicking под предыдущим блоком
    3. В категории Lists найдите блок select list item
    4. Перетащите его в поле значения set Player1.Source to
    5. В блоке select list item: в первое поле - global songPaths, во второе - global currentSongIndex
  • Запуск воспроизведения:
    1. В категории Player1 найдите блок call Player1.Start
    2. Перетащите этот блок внутрь блока when ListView1.AfterPicking под предыдущими блоками
  • Обновление текста с названием песни:
    1. В категории Label2 найдите блок set Label2.Text to
    2. Перетащите этот блок внутрь блока when ListView1.AfterPicking под предыдущими блоками
    3. В категории Text найдите блок join
    4. Перетащите блок join в поле значения set Label2.Text to
    5. В первое поле блока join введите текст "Сейчас играет: "
    6. В категории Lists найдите блок select list item
    7. Перетащите его во второе поле блока join
    8. В блоке select list item: в первое поле - global songsList, во второе - global currentSongIndex
  • Обновление значка кнопки воспроизведения/паузы:
    1. В категории Button2 найдите блок set Button2.Text to
    2. Перетащите этот блок внутрь блока when ListView1.AfterPicking под предыдущими блоками
    3. В поле значения введите текст "❚❚" (символ паузы)
    • Программирование выбора песни из списка
  • Программирование кнопки воспроизведения/паузы:
    1. В левой панели найдите компонент Button2
    2. Выберите блок when Button2.Click
    3. Перетащите этот блок в рабочую область
    4. В категории Control найдите блок if then else
    5. Перетащите этот блок внутрь блока when Button2.Click
    6. В категории Player1 найдите блок Player1.IsPlaying
    7. Перетащите его в условие блока if then else
  • Действия для паузы (когда музыка играет):
    1. В категории Player1 найдите блок call Player1.Pause
    2. Перетащите этот блок в секцию then блока if then else
    3. В категории Button2 найдите блок set Button2.Text to
    4. Перетащите этот блок в секцию then под предыдущим блоком
    5. В поле значения введите текст "▶" (символ воспроизведения)
  • Действия для воспроизведения (когда музыка на паузе):
    1. В категории Player1 найдите блок call Player1.Start
    2. Перетащите этот блок в секцию else блока if then else
    3. В категории Button2 найдите блок set Button2.Text to
    4. Перетащите этот блок в секцию else под предыдущим блоком
    5. В поле значения введите текст "❚❚" (символ паузы)
    • Кнопка воспроизведения/паузы
  • Программирование кнопки "предыдущая песня":
    1. В левой панели найдите компонент Button1
    2. Выберите блок when Button1.Click
    3. Перетащите этот блок в рабочую область
  • Уменьшение индекса текущей песни:
    1. В категории Variables найдите блок set global currentSongIndex to
    2. Перетащите этот блок внутрь блока when Button1.Click
    3. В категории Math найдите блок с оператором минус _ - _
    4. Перетащите этот блок в поле значения set global currentSongIndex to
    5. В левое поле блока _ - _ перетащите блок global currentSongIndex из категории Variables
    6. В правое поле блока _ - _ введите число 1
  • Проверка на выход за границы списка:
    1. В категории Control найдите блок if then
    2. Перетащите этот блок внутрь блока when Button1.Click под предыдущим блоком
    3. В категории Logic найдите блок сравнения _ < _ (меньше)
    4. Перетащите этот блок в условие блока if then
    5. В левое поле блока _ < _ перетащите блок global currentSongIndex
    6. В правое поле блока _ < _ введите число 1
  • Действия при выходе за нижнюю границу:
    1. В категории Variables найдите блок set global currentSongIndex to
    2. Перетащите этот блок в секцию then блока if then
    3. В категории Lists найдите блок length of list
    4. Перетащите этот блок в поле значения set global currentSongIndex to
    5. В поле блока length of list перетащите блок global songsList
  • Обновление источника и начало воспроизведения:
    1. После блока if then добавьте блок set Player1.Source to
    2. Настройте его так же, как в обработчике выбора песни (используя блок select list item)
    3. Добавьте блок call Player1.Start
    4. Обновите текст Label2 (как в обработчике выбора песни)
    5. Установите текст Button2 на "❚❚" (символ паузы)
    • Кнопка предыдущей песни
  • Программирование кнопки "следующая песня":
    1. Аналогично запрограммируйте обработчик для Button3
    2. Отличия: увеличивайте индекс (+1 вместо -1) и проверяйте верхнюю границу (> вместо <)
    3. При выходе за верхнюю границу устанавливайте индекс равным 1
    4. Остальные действия идентичны кнопке "предыдущая песня"
    • Кнопка следующей песни
  • Настройка ползунка громкости:
    1. В левой панели найдите компонент Slider1
    2. Выберите блок when Slider1.PositionChanged
    3. Перетащите этот блок в рабочую область
    4. В категории Player1 найдите блок set Player1.Volume to
    5. Перетащите этот блок внутрь блока when Slider1.PositionChanged
    6. В категории Math найдите блок деления _ / _
    7. Перетащите этот блок в поле значения set Player1.Volume to
    8. В левое поле блока деления перетащите блок Slider1.ThumbPosition из категории Slider1
    9. В правое поле блока деления введите число 100
    • Управление громкостью
Совет: Для улучшения кода вы можете создать процедуру для переключения песен с параметром "направление" (например, -1 для предыдущей песни и +1 для следующей). Это позволит избежать дублирования кода и сделает его более поддерживаемым.
Важно! При программировании кнопок переключения песен всегда выполняйте все три действия: обновление источника Player1, запуск воспроизведения И обновление текста Label2. Пропуск любого из этих шагов приведет к некорректной работе приложения.

Шаг 5: Тестирование плеера

  • Протестируйте ваше приложение:
    Чтобы увидеть ваш музыкальный плеер в действии, воспользуйтесь руководством по тестированию приложений в нашем введении в MIT App Inventor. После запуска приложения выберите песню из списка и используйте кнопки управления!
    • Тестирование приложения
Поздравляем! Ваш музыкальный плеер теперь готов! Вы можете выбирать песни из списка, управлять воспроизведением и регулировать громкость прямо в вашем приложении.

Скачать проект

Если у вас возникли сложности, вы можете скачать готовый файл проекта в нашем центре загрузок:

Перейти в центр загрузок