Sådan føjes musik / lyd til din Flutter-app

Efter Flutter Create-udfordringen, troede jeg, at det ville være en skabelse tid til refleksion og dele viden om nogle af de udfordringer, jeg stod overfor, og hvordan jeg løste disse udfordringer. En af disse var at tilføje musik til min app.

Efter at have opdaget, at Flutter SDK ikke har support til at afspille lyd / musik, søgte jeg gennem alle de tilgængelige pakker, der var musikrelateret på pub.dev og fandt følgende 6.

  1. assets_audio_player
  2. Audioafspiller / lydafspillere / lydafspiller 2
  3. Fløjte musikafspiller
  4. Fluttery Audio
  5. Stereoanlæg
  6. Musik afspiller

Forsøger at finde et musikplugin, ikke så hårdt. Prøver du at finde et musikplugin, der fungerede på både Android OG iOS? Lidt mere udfordrende.

For at redde dig fra at skulle gå af og undersøge dig selv, har jeg besluttet at dele et hurtigt eksempel for at spille musik med hver pakke og angivet de problemer, jeg løb ind i.

Hvis du hurtigt vil springe til slutningen - finder du en tabel, hvor jeg har opsummeret de vigtigste fund for hver pakke. Jeg har angivet, hvis de understøtter Android og / eller iOS, hvis de understøtter afspilning af hostede musikfiler, hvis de understøtter interne enhedsmusikfiler og til sidst, hvis de understøtter afspilning af musikfiler fra dit Flutter-projektets aktivitetsbibliotek.

Vil du takke mig? At vise din påskønnelse af denne pakke ved at klappe på Medium og dele den ville være meget værdsat!

assets_audio_player

Github | Pub

Dette var en af ​​de første pakker, jeg prøvede, men desværre kører den ikke på iOS. Hvis du har brug for både iOS og Android, skal du undgå denne.

Hvis du ikke ønsker at understøtte iOS, er denne pakke let at konfigurere, og du kan nemt klone deres eksempel for at teste en app til musikafspillereksempel.

Sådan konfigureres asset_audio_player 1.0.1 for at afspille musik straks i baggrunden.

Problemer

  • Kun Android
  • Mangler en loop-metode for let at holde lyden i afspilning
  • Jeg har fundet ud, at lyden undertiden ikke afspilles første gang i emulatoren, jeg er ikke sikker på, hvad der forårsager dette, men jeg anbefaler, at du genstarter din emulator, og at det normalt fungerer anden gang for mig (ikke nødvendigvis pakken skyld, men bare lade dig vide at være opmærksom på det!)

Lydafspillere / lydafspiller / lydafspiller 2

Github | Pub

For at afhjælpe potentiel forvirring - Jeh, du læser det rigtigt, der er 2 gaffelversioner af den allerførste Audio Player-pakke.

Chokerende, jeg ved det!

Den senest opdaterede pakke er lydafspillere. På trods af navnet er lydafspillere 2 ikke blevet opdateret for nylig end hverken lydafspiller eller lydafspillere. For at undgå forvirring har jeg kun linket til den sidst opdaterede pakke.

Jeg anbefaler fuldt ud at bruge lydafspillere, når de har brugt det i mit Flutter Create-projekt og fandt det meget let at opsætte og bruge. Dette er den eneste musikpakke, som jeg formåede at få arbejde for iOS og Android uden problemer.

Hvis udviklerne af nogen af ​​disse 3 læser dette, skal du kontakte udviklerne af de andre Audio Player-pakker og acceptere at arbejde på en enkelt pakke, det favoriserer ikke nogen, hvis der er 3 versioner af den samme pakke .

Her er et hurtigt eksempel på plugin i handling

Problemer

  • Det samme som asset_audio_player, hvor jeg undertiden fandt, at lyden ikke kunne afspilles umiddelbart efter lancering allerførste gang på en emulator (kræver normalt en genstart af emulatoren)
  • Kan ikke afspille mp3's gemte eksternt ved hjælp af deres url
  • Kan ikke afspille enhedens interne musikfiler

Fløjte musikafspiller

Github | Pub

Med dette plugin er du begrænset til kun at bruge den musik, der allerede findes på brugerens enhed. Det lever op til dets navn - det er det perfekte bibliotek, hvis du vil udvikle en musikafspiller, men desværre understøtter det kun Android og ikke både iOS og Android.

En ting, jeg ville elske at se, var ekstra funktionalitet til afspilning af lyd specificeret af udvikleren fra biblioteket Flutter-aktiver.

Hvis du har nogle iOS-udviklingserfaringer, ville det være fantastisk, hvis du bidrog til projektet, så det fungerer både for iOS og Android!

Bemærk
Sørg for, at du har musik placeret på din Android-enhed, når du bruger plugineksempelprojektet og også eksemplet musikafspillerprojekt, ellers fungerer det (og eksemplet nedenfor) ikke.

Hvis du ikke er sikker på, hvordan du hurtigt tilføjer musik til din emulerede enhed, skal du blot trække og slippe en MP3-fil fra den pc, hvor du kører emulatoren, hvor din emulator i øjeblikket er aktiv, og den vil automatisk sætte MP3-filen i emulators downloads. Derefter skal du kopiere denne fil til lydafsnittet.

Når du først har det hele opsat - kan du køre eksemplet nedenfor!

Problemer

  • Ikke implementeret til iOS endnu (fra lørdag 4. maj 2019)
  • Kan ikke afspille mp3'er placeret i aktivitetsbiblioteket
  • Mangler en loop-metode for let at holde lyden i afspilning

Fluttery Audio

Github | Pub

Opdatering (7. oktober 2019): Det ser ud til, at denne pakke ikke længere er tilgængelig - både GitHub-linket og Pub-linket fungerer ikke længere.

Hvis du søger at streame musik fra en ekstern placering online - vil Fluttery Audio give dig den funktionalitet!

Selvom jeg ikke er helt sikker på, om det vil fungere med, at dit iOS-projekt har fundet et problem med at få mit eksempel til at køre på iOS og bemærke andre, der har problemer med plugin på iOS.

Hver gang jeg kørte mit eksempel på en Android-enhed, løb jeg ind i et problem på grund af mangel på AndroidX-support. Dette er forårsaget af at bruge et andet plugin i dit projekt, der bruger Android X. Forhåbentlig bliver det opgraderet til Android X snart, og der er i øjeblikket en åben PR, som endnu ikke er slået sammen for at sikre, at pakken fungerer med Android X .

Her er et hurtigt eksempel på, hvordan du streamer en ekstern musikfil, så snart du indlæser din app

Problemer

  • Mangler Android X support lige nu
  • Kan ikke afspille musikfiler fra Flutter-projektets aktivitetsmappe
  • Måske har du problemer med iOS-support (?)
  • Kunne ikke få det til at arbejde uden for build-funktionen
  • Mangler en loop-metode for let at holde lyden i afspilning

Stereoanlæg

Github | Pub

Ikke fan af, hvordan det kræver, at du manuelt opdaterer interne Android- og iOS-filer. Ville elske det, dette kunne automatiseres i et script. Hovedsageligt fordi jeg tror, ​​det kunne føre til yderligere problemer, hvis de tilføjer den til den forkerte fil, for eksempel, er jeg ikke bekendt med typisk iOS-appudvikling, så hver gang jeg søgte efter Info.plist fandt jeg adskillige filer, der havde samme navn.

Manuel redigering af filer - ikke sjovt

Jeg prøvede adskillige gange for at få dette til at afspille lyd øjeblikkeligt, da appen blev åbnet, men løb ind i et problem med den indbyggede Android-kode, som jeg brugte tid til at fejlsøge og finde ud af, hvad der præcist forårsager problemet. Jeg kunne ikke gøre nogen yderligere fremskridt, og jeg har overladt det til pakkediverne for at undersøge yderligere.

Desværre, efter at have justeret mit eksempel for at prøve at få pakken til at fungere, hver gang der blev klikket på en knap, løb jeg stadig med det samme problem ovenfor, og der er desværre ikke noget eksempel på denne pakke.

Problemer

  • Kan ikke afspille musik i baggrunden fra at starte appen med det samme
  • Det ser ud til, at der er et uafklaret problem med denne pakke til Android API 27
  • Temmelig svært at konfigurere (måske gør jeg noget forkert, og det er derfor, jeg løber ind i disse problemer, men det skulle ikke være så svært)

Musikafspiller (under udvikling)

Gitlab | Pub

I øjeblikket under udvikling, og da jeg først begyndte at undersøge lyd / musikafspilning af plugins, havde den ikke et eksempel, og nu er der en \ o / Selvom jeg desværre ikke var i stand til at få eksemplet med succes, når jeg testede det.

Plugin i repoen er op til version 0.0.6, men den seneste version på pub er 0.0.3, synes det er bedst at spore udviklingen af ​​dette plugin og opdatere dette afsnit i fremtiden, når en nyere version er blevet offentliggjort på pub.

På dette nuværende tidspunkt tror jeg, at pakken muligvis kun er iOS, selvom jeg ikke er 100% sikker. Hvis dette er tilfældet, er måske det bedste case-scenarie devs fra Flute Music Player og Music Player-teamet for at fremstille den ene Music Player, der tilbyder den samme funktionalitet til både iOS og Android

Problemer

  • Under udvikling og ikke klar til brug

Konklusion

Det er overraskende at se så mange forskellige musik / lydpakker, der allerede er tilgængelige for Flutter, men som du kan se fra nedenstående tabel er der nogle vigtige funktioner, der mangler for hver af pakkerne, og det er vigtigt at være opmærksom på disse, inden du vælger en pakke til brug i dit projekt.

Jeg har brugt “?” Til nogle af de pakker, hvor jeg følte, at jeg ikke var helt sikker på, om det ville være en god ide at bruge pakken til det formål, baseret på mine egne personlige oplevelser - for eksempel gør jeg måske noget meget forkert med stereo, så jeg ville sætte pris på, at andre deler deres oplevelse.

Jeg vil meget gerne se, at nogle af devserne fra disse pakker fungerer sammen for at producere 1/2-pakker, der har alle disse nøglefunktioner og vigtigst af alt for Flutter-applikationer - fungerer på både iOS og Android.

Del dine tanker!

For at hjælpe dem, der ønsker at bruge en af ​​disse pakker og også udviklerne af disse pakker, syntes jeg, det ville være dejligt at samle en undersøgelse, så du kunne dele dine oplevelser med Flutter's musik / lydpakker.

Jeg ville elske det, hvis du kunne udfylde denne undersøgelse om Flutter-musik / lydpakker: https://forms.gle/JD4j9GQjgHEibJP5A

Endelig

Tak for at have læst! Jeg håber, at denne opskrivning har hjulpet dig med at vælge den pakke, der passer til dine behov i dit Flutter-projekt!

Jeg fejrer dig, når du kommer til slutningen af ​​denne skrivning

https://twitter.com/MarkOSullivan94