Comment ajouter de la musique / audio à votre application Flutter

Après le défi Flutter Create, j’ai pensé que ce serait un temps propice à la réflexion et au partage des connaissances sur certains des défis auxquels j’ai fait face et sur la façon dont j’ai résolu ce défi. L'un d'eux consistait à ajouter de la musique à mon application.

Après avoir découvert que le SDK Flutter n’a plus de prise en charge de la lecture audio / musicale, j’ai cherché dans tous les packages disponibles qui étaient liés à la musique sur pub.dev et j’ai trouvé le 6 suivant.

  1. assets_audio_player
  2. Lecteur audio / Lecteurs audio / Lecteur audio 2
  3. Lecteur de musique de flûte
  4. Fluttery Audio
  5. Stéréo
  6. Lecteur de musique

Essayer de trouver un plugin de musique, pas si difficile. Essayer de trouver un plugin de musique qui a fonctionné à la fois sur Android et iOS? Un peu plus difficile.

Pour vous éviter d’avoir à faire des recherches vous-même, j’ai décidé de vous donner un exemple rapide de lecture de musique avec chaque package et de répertorier les problèmes que j’ai rencontrés.

Si vous voulez passer rapidement à la fin, vous trouverez un tableau dans lequel j'ai résumé les principales conclusions pour chaque paquet. J'ai indiqué s'ils prennent en charge Android et / ou iOS, s'ils prennent en charge la lecture de fichiers musicaux hébergés à distance, s'ils prennent en charge des fichiers musicaux internes et enfin s'ils prennent en charge la lecture de fichiers musicaux à partir du répertoire des ressources de votre projet Flutter.

Tu veux me remercier? Montrez votre appréciation pour ce forfait en applaudissant sur Medium et en le partageant serait grandement apprécié!

assets_audio_player

Github | Pub

C’était l’un des premiers packages que j’ai essayé, mais malheureusement, il ne fonctionne pas sur iOS. Si vous avez besoin d'iOS et d'Android, évitez celui-ci.

Si vous ne souhaitez pas prendre en charge iOS, ce package est facile à configurer et vous pouvez facilement cloner leur exemple pour tester un exemple d'application de lecteur de musique.

Voici comment configurer asset_audio_player 1.0.1 pour jouer de la musique immédiatement en arrière-plan.

Problèmes

  • Android seulement
  • Manquer une méthode de boucle pour garder facilement la lecture audio
  • J'ai constaté que, parfois, le son ne jouait pas pour la première fois dans l'émulateur, je ne suis pas sûr de la cause, mais je vous recommande de redémarrer votre émulateur et cela fonctionne généralement une deuxième fois pour moi (ce n'est pas nécessairement la faute du paquet, mais vous faire savoir en être conscient!)

Lecteurs audio / Lecteur audio / Lecteur audio 2

Github | Pub

Pour dissiper toute confusion possible - si vous avez bien lu, il existe 2 versions en fourche du tout premier package Audio Player.

Choquant, je sais!

Le dernier package mis à jour est Lecteurs audio. Malgré son nom, Audio Players 2 n’a pas été mis à jour plus récemment que Audio Player ou Audio Players. Pour éviter toute confusion, je n’ai lié que le dernier paquet mis à jour.

Je recommande vivement d'utiliser des lecteurs audio l'ayant utilisé dans mon projet Flutter Create et je l'ai trouvé très facile à configurer et à utiliser. C'est le seul package musical que j'ai réussi à faire fonctionner pour iOS et Android sans aucun problème.

Si les développeurs de l'un de ces 3 lisent ceci, veuillez contacter les développeurs des autres packages de lecteur audio et accepter de travailler sur un seul package. Il ne fait de faveurs à personne s'il existe 3 versions du même package. .

Voici un exemple rapide du plugin en action

Problèmes

  • Identique à asset_audio_player où j’ai parfois constaté que l’audio ne pouvait pas être lu immédiatement après le premier lancement sur un émulateur (il fallait généralement redémarrer celui-ci).
  • Impossible de lire les mp3 stockés à distance en utilisant leur URL
  • Impossible de lire les fichiers de musique internes d'un périphérique

Lecteur de musique de flûte

Github | Pub

Avec ce plug-in, vous ne pouvez utiliser que la musique déjà présente sur le périphérique de l'utilisateur. Il porte bien son nom - c’est la bibliothèque idéale pour développer un lecteur de musique, mais malheureusement, il ne prend en charge qu’Android et pas à la fois iOS et Android.

Une chose que j'aimerais voir serait une fonctionnalité supplémentaire pour la lecture de l’audio spécifié par le développeur à partir du répertoire d’actifs Flutter.

Si vous avez une expérience de développement iOS, ce serait génial si vous contribuiez au projet afin que cela fonctionne à la fois pour iOS et Android!

Remarque
Assurez-vous que la musique se trouve sur votre appareil Android lorsque vous utilisez le projet exemple de plug-in, ainsi que le projet exemple de lecteur de musique, sinon cela (et l'exemple ci-dessous) ne fonctionnera pas.

Si vous ne savez pas comment ajouter rapidement de la musique à votre appareil émulé, faites simplement glisser un fichier MP3 depuis le PC sur lequel vous exécutez l'émulateur à l'endroit où votre émulateur est actuellement actif. Le fichier MP3 sera automatiquement placé dans le dossier. téléchargements de l'émulateur. Ensuite, vous devez copier ce fichier dans la section Audio.

Une fois que vous avez tout configuré, vous pouvez exécuter l'exemple ci-dessous!

Problèmes

  • Pas encore implémenté pour iOS (à partir du samedi 4 mai 2019)
  • Impossible de lire les fichiers MP3 situés dans le répertoire des ressources
  • Manquer une méthode de boucle pour garder facilement la lecture audio

Fluttery Audio

Github | Pub

Mise à jour (7 octobre 2019): Il semble que ce package ne soit plus disponible - les liens GitHub et Pub ne fonctionnent plus.

Si vous souhaitez diffuser en ligne de la musique à partir d’un emplacement distant, Fluttery Audio vous fournira cette fonctionnalité!

Bien que je ne sois pas tout à fait sûr que cela fonctionne avec votre projet iOS, vous rencontrez des difficultés pour que mon exemple s’exécute sur iOS et que vous remarquiez que d’autres rencontrent des difficultés avec le plug-in sur iOS.

Lorsque j'exécutais mon exemple sur un périphérique Android, je rencontrais un problème en raison d'un manque de prise en charge d'AndroidX. Ceci est dû à l'utilisation d'un autre plugin dans votre projet utilisant Android X. Espérons que la mise à niveau vers Android X sera bientôt disponible. Il existe actuellement un PR ouvert qui n'a pas encore été fusionné pour garantir que le package fonctionnera avec Android X .

Voici un exemple rapide sur la façon de diffuser un fichier de musique à distance dès que vous chargez votre application.

Problèmes

  • Manque de support Android X en ce moment
  • Impossible de lire des fichiers de musique à partir du dossier d’actifs du projet Flutter
  • Peut-être des problèmes avec le support iOS (?)
  • Impossible de le faire fonctionner en dehors de la fonction de construction
  • Manquer une méthode de boucle pour garder facilement la lecture audio

Stéréo

Github | Pub

Pas un fan sur la façon dont il vous oblige à mettre à jour manuellement les fichiers internes Android et iOS. J'adorerais que cela puisse être automatisé dans un script. Principalement parce que je pense que cela pourrait entraîner des problèmes supplémentaires s’ils ajoutaient le fichier au mauvais fichier. Par exemple, je ne suis pas familiarisé avec le développement typique d’une application iOS. Ainsi, chaque fois que je cherchais Info.plist, je trouvais de nombreux fichiers portant le même nom.

Modification manuelle des fichiers - pas amusant

J'ai essayé à maintes reprises de faire en sorte que cette application lise immédiatement de la musique dès l'ouverture de l'application, mais j'ai rencontré un problème avec le code Android natif que j'ai passé du temps à déboguer et à comprendre exactement l'origine du problème. Incapable de progresser, j’ai laissé aux développeurs de paquetages le soin d’enquêter davantage.

Malheureusement, après avoir peaufiné mon exemple pour essayer de faire fonctionner le package chaque fois que vous cliquez sur un bouton, je rencontrais toujours le même problème que précédemment et, malheureusement, il n’existait aucun exemple pour ce package.

Problèmes

  • Impossible de jouer de la musique en arrière-plan après le démarrage immédiat de l'application
  • On dirait qu’il existe un problème non résolu avec ce package pour Android API 27
  • Plutôt difficile à configurer (peut-être que je fais quelque chose de mal et c’est pourquoi je rencontre ces problèmes, mais cela ne devrait pas être aussi difficile)

Lecteur de musique (en développement)

Gitlab | Pub

Actuellement en développement et quand j’ai commencé à étudier les plug-ins de lecture audio / musique, il n’y avait pas d’exemple et maintenant, il en existe un. Bien que, malheureusement, j’ai été incapable de faire fonctionner l’exemple avec succès chaque fois que j’ai essayé de le tester.

Le plugin dans le référentiel est jusqu’à la version 0.0.6, mais la dernière version disponible sur pub est la 0.0.3. Il est préférable de suivre les progrès de ce plugin et de mettre à jour cette section à l’avenir lorsqu'une nouvelle version sera publiée sur pub.

À l’heure actuelle, je pense que le package pourrait être iOS uniquement, bien que je ne sois pas sûr à 100%. Si tel est le cas, le meilleur des scénarios est peut-être que les développeurs de Flute Music Player et Music Player s’associent pour créer un lecteur de musique unique offrant les mêmes fonctionnalités pour iOS et Android.

Problèmes

  • En développement et pas prêt à utiliser

Conclusion

Il est surprenant de voir autant de packages musicaux / audio différents déjà disponibles pour Flutter. Toutefois, comme vous pouvez le constater dans le tableau ci-dessous, il manque certaines fonctionnalités principales pour chacun des packages et il est important de les connaître avant de choisir un package. utiliser dans votre projet.

J'ai utilisé «?» Pour certains des packages pour lesquels je ne savais pas trop si ce serait une bonne idée de l'utiliser à cette fin, en fonction de mes expériences personnelles - par exemple, je pourrais faire quelque chose très mal avec Stereo alors j'apprécierais que les autres partagent leur expérience.

J'adorerais voir certains développeurs de ces packages travailler ensemble pour produire des packages 1/2 qui possèdent toutes ces fonctionnalités clés et le plus important pour les applications Flutter - fonctionne à la fois sur iOS et Android.

Partage tes pensées!

Pour aider ceux qui souhaitent utiliser l’un de ces packages et les développeurs de ces derniers, j’ai pensé qu’il serait bien de recueillir un sondage pour partager vos expériences avec les packages audio / musique de Flutter.

J'aimerais beaucoup si vous pouviez remplir ce sondage sur les packages musique / audio Flutter: https://forms.gle/JD4j9GQjgHEibJP5A

finalement

Merci d'avoir lu! J'espère que cet article vous a aidé à choisir le forfait qui correspond à vos besoins dans votre projet Flutter!

Je vous félicite de vous rendre à la fin de cet article

https://twitter.com/MarkOSullivan94