machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Воспроизведение музыки в приложениях Ionic Capacitor

Дата публикации Oct 3, 2019

В этом посте вы узнаете, как воспроизводить музыку в приложении Capacitor Ionic Angular, будь то музыкальный проигрыватель или просто уведомление. Конденсатор - это последнее новшество в мире гибридных приложений. Он создан, чтобы заменить и улучшить Cordova.

В этом посте вы узнаете

  • Как воспроизводить музыку и звуковые файлы в приложениях Ionic 4 - как из локальных файлов, так и из веб-ссылок
  • Как использовать элементы управления музыкой, такие как следующий, предыдущий, пауза и т. Д.

Эта демонстрация поддерживаетсяIonic 4 Spotify Starterиз Enappd. Полный исходный код этого урока доступен здесь -Ионные-4-музыка(конденсаторная ветвь)

Если вы ищете функциональность музыки вИонная 4 Угловая Кордоваприложения, пожалуйста, проверьтеэтот блог

Давайте посмотрим краткое введение в каждую из включенных структур:

  1. ионный
  2. Конденсатор

Что такое ионное?

Вы, наверное, уже знаете об Ionic, но я выкладываю его сюда только для начинающих.ионныйSDK для разработки гибридных мобильных приложений. Он предоставляет инструменты и услуги для разработки гибридных мобильных приложений с использованием веб-технологий, таких как CSS, HTML5 и Sass. Приложения могут создаваться с использованием этих веб-технологий, а затем распространяться через собственные магазины приложений. Эти приложения могут быть установлены на устройствах, используяКордоваили конденсаторная среда.

Итак, другими словами - если вы создаете собственные приложения в Android, вы создаете код на Java. Если вы создаете собственные приложения в iOS, вы пишете код в Obj-C или Swift. Оба они мощные, но сложные языки.С помощью Cordova (и Ionic) вы можете написать один фрагмент кода для своего приложения, который может работать как на iOS, так и на Android.(и Windows!), это тоже с простотой HTML, CSS и JS.

Важно отметить вклад Кордовы в это. Ionic - это всего лишь оболочка пользовательского интерфейса, состоящая из HTML, CSS и JS. Таким образом, по умолчанию Ionic не может работать как приложение на устройстве iOS или Android. Cordova - это среда сборки, которая контейнирует (вроде) это Ionic веб-приложение и преобразует его в приложение, устанавливаемое на устройстве, наряду с предоставлением этому приложению доступа к собственным API, таким как Camera и т. Д.

Что такое конденсатор?

Cordova помогает встроить Ionic веб-приложение в приложение, устанавливаемое на устройстве. Но есть некоторые ограничения Cordova, которые Capacitor пытается преодолеть с помощью нового рабочего процесса приложения.

Capacitor - это кроссплатформенная среда выполнения приложений, которая позволяет легко создавать веб-приложения, которые изначально работают на iOS, Android, Electron,а такжепаутина. Ионные люди называют эти приложения «родными прогрессивными веб-приложениями», и они представляют собой следующую эволюцию после гибридных приложений.

Capacitor очень похож на Cordova, но с некоторыми ключевыми отличиями в рабочем процессе приложения

Вот различия между Кордовой и Конденсаторной

  1. Конденсатор считает каждый проект платформыисходный активвместовремя строительства, Это означает, что Capacitor хочет, чтобы вы хранили исходный код платформы в репозитории, в отличие от Cordova, который всегда предполагает, что вы сгенерируете код платформы во время сборки
  2. Из-за вышеизложенного, конденсатор не используетconfig.xmlили аналогичная пользовательская конфигурация для настроек платформы. Вместо этого изменения конфигурации вносятся путем редактированияAndroidManifest.xmlдля Android иInfo.plistдля Xcode
  3. Конденсатор не «запускается на устройстве» и не эмулируется через командную строку. Вместо этого такие операции выполняются через платформу-IDE. Таким образом, вы не можете запустить приложение Ionic-конденсатора с помощью команды вродеionic run ios, Вам придется запускать приложения для iOS, используя Xcode, и приложения для Android, используя Android studio.
  4. Поскольку код платформы не являетсяисходный актив,Вы можете напрямую изменить собственный код, используя Xcode или Android Studio. Это дает большую гибкость разработчикам

По сути, Capacitor - это свежая, более гибкая версия Corodva.

Плагины в конденсаторе

Кордова иIonic NativeПлагины могут быть использованы в среде конденсаторов. В этом посте мы также будем использоватьКордова-плагин-медиавоспроизводить музыку в среде Capacitor, которая также включена в плагин Ionic Native.

Тем не менее, есть определенные плагины Cordova, которые, как известно,несовместим с конденсатором.

Кроме этого, Capacitor также не поддерживает установку плагинов с переменными. Эти изменения должны быть сделаны вручную в собственном коде.

Где музыка требуется в приложениях?

Что ж ! это глупый вопрос, который я знаю. Музыка повсюду в современных приложениях. Spotify, Youtube Music, Wynk, Gaana и т. Д. Помимо самих приложений для потоковой передачи музыки, в приложениях есть множество других применений музыки / звука.

  • Вам определенно нужны звуки в игровом приложении
  • Вы можете воспроизводить звуки, когда пользователь выполняет определенные действия в приложении, например, выигрывает купон!
  • Для push-уведомлений можно воспроизводить звуки, которые тихо вставляются в приложение переднего плана.
  • Сообщения чата могут издавать звук! WhatsApp делает это
  • …… и еще много таких примеров

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

Структура Почты

Мы будем следовать пошаговому подходу к созданию приложения «Музыкальный проигрыватель» в этом приложении Ionic 4 Capacitor. Ниже приведены шаги

  • Шаг 1 - Создать базовыйIonic 4 Angularприложение
  • Шаг 2 - Настройка музыкального плагина
  • Шаг 3 - Понимание и реализация функций плагина Music
  • Шаг 4 - Интегрировать конденсатор в приложение
  • Шаг 5. Тест на Android

Так что давайте погрузимся прямо в!

Шаг 1 - Создайте базовое приложение для Ionic 4

Я подробно рассмотрел эту тему вэтот блог,

Короче говоря, шаги, которые вы должны предпринять здесь

  • Убедитесь, что в системе установлен узел (V10.0.0 на момент публикации этого блога)
  • устанавливатьионный клииспользуя npm (моя Ionic версия 4.6.0)
  • Создать приложение Ionic с помощьюionic start

Вы можете создатьblankстартер ради этого урока. На бегуionic start ionic-4-music blank, узлы модули будут установлены. После завершения установки запустите приложение в браузере, используя

$ ionic serve

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

Домашняя страница для приложения ionic-4-music в Конденсаторе

Я фактически позаимствовал интерфейс домашней страницы у Enappd'sIonic 4 Spotify стартерпросто чтобы дать вам представление о пользовательском интерфейсе и функциях.

Шаг 2 - Настройка музыкального плагина

Мы собираемся использовать плагин Ionic Native (который по сути включает плагин Cordova) -Кордова Плагин Медиа, Этот плагин имеет основные функции воспроизведения музыки, а также возможности записи. Но мы пока не будем вдаваться в функции записи.

Когда ваше основное приложение будет готово, установите плагин, используя следующие команды

$ ionic cordova plugin add cordova-plugin-media$ npm install @ionic-native/media

При этом плагин установлен, никаких дополнительных настроек. Теперь вы должны импортировать плагин вapp.module.tsи ваша домашняя страница, т.е.home.page.ts

Импорт музыкального плагина в app.module.ts

Аналогично импортируйте плагин вhome.page.tsи объявить его в конструкторе как

constructor(public platform: Platform, private media: Media) {}

Шаг 3 - Различные функции плагина Music

Теперь, когда он установлен и импортирован правильно, мы переходим к интеграции его методов. Давайте посмотрим на различные методы, которые поддерживает плагин

Полный исходный код этого урока доступен здесь -Ионные-4-музыка(конденсаторная ветвь)

Создать медиа

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

  • Из местного URL
  • Из веб-адреса

Из местного URL -Для демонстрации я буду использовать локальный файл активов. У меня есть этот файл прямо вassetsпапки.

Локальный файл активов для воспроизведения музыки

В устройствах Android необходимо отформатировать URL-адрес музыкального файла следующим образом./android_asset/public/assets/file.mp3,

Из веб-адреса -Вы также можете ввести веб-адрес напрямую. Вот URL для песни, которую вы можете использовать (пожалуйста, проверьте, существует ли этот URL, в противном случае используйте любой другой mp3-URL)

http://fabienne.sigonney.free.fr/tranquilit/Eagles - Hotel California (Acoustic).mp3

Для создания воспроизводимого мультимедиа необходимо назначить медиафайл переменной с помощьюcreateметод плагина

this.curr_playing_file = this.media.create("YOUR_FILE_URL");

В настоящее время,this.curr_playing_fileможно использовать по всей странице для воспроизведения / приостановки / остановки песни и т. д.

Воспроизведение / пауза

Самая основная функция музыкального плеера. Плагин позволяет воспроизводить или приостанавливать «созданный» медиафайл. Метод не мог быть проще 😄

this.curr_playing_file.play();

Примечание. Плагину требуется немного времени для загрузки носителя. Убедитесь, что вы не звонитеplay()на несозданную переменную носителя.

Также,ПриостановленоМедиа играет с того же места, где он был приостановлен.

getDuration

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

this.curr_playing_file.getDuration();

Нополучить длительность в плагине немного сложно (или я бы сказал, хак). Плагин не выделяет длительность непосредственно при первом вызове. Следует отметить две вещи

  1. ЕслиgetDuration()вызывается сразу после создания медиа, возвращаемая длительность будет -1
  2. ЕслиgetDuration()вызывается без воспроизведения мультимедийного файла ни разу, возвращаемая длительность будет равна -1. Чтобы избежать этого, взлом, который мы используем:
  • Создайте медиафайл как обычно
  • Воспроизведите файл мультимедиа, но сохраните громкость0позвонивthis.curr_playing_file.setVolume(0.0)
  • ВызовgetDuration()в цикле (к сожалению, да), пока вы не найдете, казалось бы, действительное значение длительности для песни. Ниже приведен мой код, чтобы получить продолжительность
Получить продолжительность песни с этим методом Hacky

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

Заметка- Не забудьclearIntervalкак только продолжительность получена. В противном случае цикл будет продолжаться вечно.

GetCurrentPosition

getCurrentPositionэто довольно понятно Он сообщает вам текущую позицию песни в секундах. Опять же, это имеетHackyреализация. Я надеюсь, что когда плагин улучшится, этот метод улучшится, чтобы иметь нехакерское решение

Получить текущую позицию песни и обновить переменную, чтобы обновить панель поиска

Обратите внимание наtoHHMMSS()Функция, которую я использовал для преобразования секунд вmm:ssформат. Это то, что вы хотели бы показать своим пользователям вместо целого значения в секундах, как показано ниже.

Покажите значения времени в формате мм: сс для хорошего UX

Искать

Поскольку отличный музыкальный проигрыватель имеет возможность переходить к определенному времени в песне, наш плагин также имеет эту возможность.seekTo()Метод позволяет пользователям переходить к любому моменту в песне с помощью панели поиска.

Я реализовал панель поиска как компонент Ionic Range, где положение круга контролируетсяngModel, Мы можем обновитьpositionпеременная, используя значения изgetCurrentPosition()метод.

<ion-range min="0" max="{{duration}}" [(ngModel)]="position" color="light"></ion-range>

Я реализовалПеремотка впередиперемоткакнопка, чтобы продемонстрировать эту функцию. Связанный код выглядит следующим образом. Например. Кнопка перемотки назад с вызовомcontrolSeconds('back')

Стоп

Когда песня заканчивается, мы должны остановить ее. Вот почему плагин имеет этот метод, чтобы остановить воспроизведение звука. Обратите внимание, что остановка песни не освобождает ее из памяти в Android.

this.curr_playing_file.getDuration();

Выпуск

Освобождает звуковые ресурсы базовой операционной системы. Это особенно важно для Android, поскольку для воспроизведения мультимедиа существует ограниченное количество экземпляров OpenCore. Приложения должны вызыватьreleaseфункция для любогоMediaресурс, который больше не нужен.

onStatusUpdate

Это операция подписки. При этом мы можем подписаться на статус песни - будь то воспроизведение, пауза или остановка. Это полезно, когда мы хотим изменить кнопку воспроизведения на паузу и наоборот.

Получить статус песни, чтобы изменить значки воспроизведения / паузы и т. Д.

Шаг 4 - Интегрировать конденсатор в приложение

Конденсатор также можно подключить к существующему приложению Ionic. Чтобы подключить Capacitor к существующему приложению Ionic, запустите

$ ionic integrations enable capacitor

Это прикрепит конденсатор к вашему ионному приложению. После этого вы должныinitприложение конденсатора с

$ npx cap init YOUR_APP_NAME YOUR_APP_ID

Вы уже должны иметьYOUR_APP_NAMEа такжеYOUR_APP_IDвconfig.xml, Используйте то же самое здесь, чтобы не было несоответствия или путаницы.

Шаг 5. Тест на Android

Теперь, когда все готово, нам нужно построить это приложение для Android. Зачем ? Потому что плагины Cordova не работают в браузере 😆. Но хорошо, что плагины Cordova работают с Capacitor 😎

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

$ ionic build

Теперь добавьте платформу Android (или iOS)

$ npx cap add android

Это должно добавить платформу Android в ваш проект.


Совет по устранению неполадок

Если вы сталкиваетесь с ошибкой, говоря

Capacitor could not find the web assets directory "/Users/abhijeetrathore/ionic-4-music/www".

Проверьте своиcapacitor.config.jsonфайл. Убедитесь, чтоwebDirполе имеет значениеwww, Если нет, изменитеwebDirполе, имеющее то же значение, что и последний параметр URL-адреса, отображаемого в приведенной выше ошибке


Обратите внимание, что вы не можете запустить проект прямо на телефоне, используя CLI в Capacitor. Вам нужно будет открыть проект в Android Studio и запустить его с помощью IDE Android Studio. Откройте проект в Android Studio, используя

$ npx cap open android

Теперь запустите приложение на своем устройстве с помощью Android Studio, и вы получите это! (Образец из моего One Plus 6T, Android P)

Примечание: после добавления платформы, если вы вносите какие-либо изменения в приложение, вам нужно запуститьionic buildа потомnpx cap syncчтобы отразить эти изменения в родной платформе

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

Воспроизведение музыки в приложении Capacitor Ionic

И вот вы играете музыку в собственном приложении Ionic 4 Capacitor. Itor 🎉

Вывод

В этом посте мы узнали, как реализовать функциональные возможности музыкального проигрывателя в приложении Capacitor Ionic 4 с помощью плагина Cordova. Мы узнали, как использовать функции воспроизведения, паузы, поиска и т. Д. Теперь вы можете осуществлять воспроизведение музыки в своих приложениях Ionic 4 и создавать что-то захватывающее!

Эта демонстрация поддерживаетсяIonic 4 Spotify Starterиз Enappd. Полный исходный код этого урока доступен здесь -Ионные-4-музыка(конденсаторная ветвь)

Следующие шаги

Теперь, когда вы узнали о реализации воспроизведения музыки в приложении Ionic Capacitor, вы также можете попробовать следующие блоги дляИонные приложения

Ионная Реакция

Если вам нужна база, чтобы начать следующийПриложение Ionic 4 React, вы можете сделать свое следующее удивительное приложение, используяIonic React Full App

Ionic 4 React Full App с огромным количеством макетов и функций

Ионный Угловой

Если вам нужна база, чтобы начать следующийIonic 4 Angular приложение, вы можете сделать свое следующее удивительное приложение, используяIonic 4 Full App

Ionic 4 Full App с огромным количеством макетов и функций

Оригинальная статья

Footer decor

© machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map