Music Extraction and Setup

To add music to the app they are two option, an automatic solution and a manual one , automatic solution work by simply adding music to a specific folder and running script , and script handle music and, album art compression and music info extraction, and they are a manual option where you have to add music to the folder manually and rename and the files to fit the right format.

1- Option 1 (Manual) :

First, you need to provide music files, they must be mp3 files and have a good audio quality, the higher the quality the higher size of the track, recommended is 96-120 kbps , if tracks have big sizes its will affect the final app size so keep this in mind.

Add your mp3 files to this folder music_offline_template/assets/music and rename them to something simple like "track_1.mp3" its should look like this :

Next, we need to add album arts it's optional if you want to use only one cover to all tracks, or each one is unique, for each track Unique cover you need to have png file with square dimensions 200x200 recommended and add them to this folder.

music_offline_template/assets/musicInfo/albumsCovers

Use simple file name for it example "cover_1.png" , should look like this :

There also default cover its used to display as cover if some covers failed to load or simply if you don't use multiple kinds of music covers it can be found here, (don't change the file name) : music_offline_template/assets/res replace with a new image just keep the same file name and format.

Now we need to create a file thats hold all music data (info and files paths ), create a file with the name: "info.json" in this folder music_offline_template/assets/musicnfo

To add values to the json file we included a template for the one we used to make it easy for you to use it as a reference its list of objects represent track metadata and files :

[
   {
       "songPath": "assets/music/track_4.mp3",
       "title": "Cloud spirirt",
       "artistName": "Sun Beaterz",
       "albumTitle": "null",
       "albumCover": "assets/musicInfo/albumsCovers/cover_4.png"
   },
   {
       "songPath": "assets/music/track_2.mp3",
       "title": "Don't stop the fire",
       "artistName": "Sun Beaterz",
       "albumTitle": "null",
       "albumCover": "assets/musicInfo/albumsCovers/cover_2.png"
   },
   {
       "songPath": "assets/music/track_3.mp3",
       "title": "Slumber",
       "artistName": "Sun Beaterz",
       "albumTitle": "null",
       "albumCover": "assets/musicInfo/albumsCovers/cover_3.png"
   },
   {
       "songPath": "assets/music/track_1.mp3",
       "title": "Stay with me",
       "artistName": "Sun Beaterz",
       "albumTitle": "null",
       "albumCover": "assets/musicInfo/albumsCovers/cover_1.png"
   },
   {
       "songPath": "assets/music/track_5.mp3",
       "title": "Tuyo (Ft. Simone Vignola)",
       "artistName": "Sun Beaterz, Simone Vignola",
       "albumTitle": "null",
       "albumCover": "assets/musicInfo/albumsCovers/cover_5.png"
   },
   {
       "songPath": "assets/music/track_6.mp3",
       "title": "UNSECRET - CAN YOU HEAR ME (FT. YOUNG SUMMER) (SUN BEATERZ REMIX)",
       "artistName": "Sun Beaterz",
       "albumTitle": "null",
       "albumCover": "assets/musicInfo/albumsCovers/cover_6.png"
   },
   {
       "songPath": "assets/music/track_7.mp3",
       "title": "Venus",
       "artistName": "Sun Beaterz",
       "albumTitle": "null",
       "albumCover": "assets/musicInfo/albumsCovers/cover_7.png"
   }
]

• songPath : the path in assets where the track file.
• title : Song title.
• artistName : name of the artist.
• albumTitle : album where song belong.
• albumCover : the path to the cover image or default cover.
• After you add all tracks to the info.json file double-check them to make sure the formatting is correct and each track have the right cover and info, then rebuild the app apply changes for the new tracks to show on the app

2- Option 2 (Automatic) :

First, we need to install FFmpeg it will handle audio compression and thumbnails extractions , follow this link on how to install on windows , other platforms tutorials will be included Helpful resources section.

After you install FFmpeg and make sure is available on the command line we move to the next step adding mp3 files to the temp folder music_offline_template/assets/temp having mp3 files with metadata and high quality will be good.

If the mp3 files don't have an album cover on its metadata the script will use the default one its can be found here music_offline_template/assets/res/default_cover.png you can replace with another image just keep it same name "default_cover.png"

After you have done all the steps above open the terminal and run this command:

 flutter pub run dev/extract_music.dart

If everything ok its should prompt you to enter music quality from the list the lower number the lower of mp3 files generated on quality and size and vice versa, then prompt for thumbnail quality, 200 is the recommended but you can choose other values the lower number the lower on quality of thumbnail on size and quality and vice versa.

Once the command start running its will create some folders in the assets directory and its will start compressing music files and extracting thumbnails, this process can take while depending on how powerful your computer and the number of mp3 files been processed.

Once its done new folders will be created including the music folder and musicInfo folder, the last one includes covers images and the info.json file double-check them all to make sure everything is correct and you can adjust values on the json file just make sure to keep the path of the file correctly and keep the formatting of the file.

if everything ok and files and folders exist you can now rebuild the application to see the new music files, once you generated all the files and ready to publish your app you can delete the temp folder on assets.