{"id":5421,"date":"2024-12-28T14:10:36","date_gmt":"2024-12-28T14:10:36","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5421"},"modified":"2024-12-28T14:10:37","modified_gmt":"2024-12-28T14:10:37","slug":"mit-app-inventor-music-player","status":"publish","type":"page","link":"http:\/\/obsidiansofteducation.com\/index.php\/mit-app-inventor-music-player\/","title":{"rendered":"MIT App Inventor Music Player"},"content":{"rendered":"\n

Hello friends and welcome to Obsidian Soft<\/p>\n\n\n\n

Today, I will teach you how to make a Music Player app in which we can load songs from our device into our app, make a playlist, and play, pause, stop, go to the previous song, and the next song just like any professional music player app.<\/p>\n\n\n\n

Our final app will look something like this:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

As you see in the demo, the list view contains the names of the songs. To get this song name from the chosen music file, we need an extension.<\/p>\n\n\n\n

So, let\u2019s download the extension from this link.
https:\/\/community.kodular.io\/t\/filetools-some-tools-to-work-with-files\/40051<\/a><\/p>\n\n\n\n

We need to log in first so log in using Google account.<\/p>\n\n\n\n

Download the aix file.<\/p>\n\n\n\n

Also, I downloaded some very nice player images from Freepik:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

\u200b\u200b<\/p>\n\n\n\n

https:\/\/www.freepik.com\/free-vector\/music-player-icons_849181.htm<\/a>
I also designed an Add Music button using a similar theme in Adobe Illustrator:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

<\/a>Now, create a new project and call it MusicPlayer.
Import the extension by clicking on Extension in the Palette section of Designer View and then, choosing Import Extension. Choose the downloaded aix file and after it is successfully imported, drag and drop it onto the viewer.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Import all buttons in the media section (I reduced the button sizes to 66 by 66 pixels as the original ones were too large)<\/p>\n\n\n\n

For screen1, make align horizontal and align vertical both center.<\/p>\n\n\n\n

Make the background color black.
Drag and drop a FilePicker component from the Media palette.<\/p>\n\n\n\n

Make height 45 and width 140 pixels. I am putting in this size as this is the size of my uploaded image for this component.<\/p>\n\n\n\n

Choose the appropriate uploaded image.<\/p>\n\n\n\n

Drag and drop a listview from the user interface below this button.<\/p>\n\n\n\n

Make width fill parent and height: 20%.<\/p>\n\n\n\n

Drag and drop a horizontal arrangement from the layout palette below the list view. Make width fill parent. And align horizontal and align vertical both center.<\/p>\n\n\n\n

Drag and drop a button from the user interface inside this horizontal arrangement.<\/p>\n\n\n\n

Rename to prevBtn. Make height and width both 66 pixels and remove text from it.<\/p>\n\n\n\n

Select prevBtn. Duplicate it by pressing Ctrl + C and Ctrl + V on the keyboard for Windows<\/p>\n\n\n\n

OR Command + C and Command + V on the keyboard for MacOS.<\/p>\n\n\n\n

Rename to playPauseBtn. We will toggle between the two states of playing and pausing using the same button.<\/p>\n\n\n\n

Choose the play image as the image for it.<\/p>\n\n\n\n

Again duplicate, rename to stopBtn, and choose the appropriate image.<\/p>\n\n\n\n

Duplicate one last time, rename to nextBtn, and choose the appropriate image.<\/p>\n\n\n\n

Drag and drop a notifier from the user interface. We will use it to show messages to users.<\/p>\n\n\n\n

Drag and drop a Player component from Media.<\/p>\n\n\n\n

Our screen design is done so let\u2019s go to the blocks section.
Let\u2019s define the global variables<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

musicPos is for maintaining the next and previous song in our list. musicPaused is for knowing that when play button is pressed, should we start the music from the very beginning or from where it was paused?<\/p>\n\n\n\n

And we need two lists for maintaining uris of songs and their names.<\/p>\n\n\n\n

When screen is initialized, first we set filePicker mimetype i.e. media typpe to Audio and we also ask for permission for reading media of type audio. The AskForPermission procedure call is inside Screen1 blocks.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

After the user has used the filePicker to choose music, the AfterPicking event of the filePicker component will be triggered so add the file picker\u2019s selection i.e. music file chosen by the user to the songUris list.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Next is the reason why we need an extension.<\/p>\n\n\n\n

(*if you want the app to work using the Companion app on an iPhone, give some text like Song 1, Song 2 as song names instead of using the extension)<\/p>\n\n\n\n

We need the extension to get the file name or song name from the URI.<\/p>\n\n\n\n

When the user chooses a song using the file picker, the file picker\u2019s selection property is set to the URI of that music file.<\/p>\n\n\n\n

We can use this URI to get the file path using the extension and from that file path, we can eventually get the file name.<\/p>\n\n\n\n

So, make a local variable for filepath.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, we can get the path from URI (filepPicker.selection) using the extension\u2019s PathFromUri procedure.<\/p>\n\n\n\n


This path is like this: \/storage\/emulated\/0\/Music\/Some song name.mp3 and we are interested in only the song name. So, we can split this path wherever \u2018\/\u2019 comes using Text\u2019s Split block and assign this to the filePath.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Our filePath local variable is now a list containing items:<\/p>\n\n\n\n

    \n
  1. Storage<\/li>\n\n\n\n
  2. Emulated<\/li>\n\n\n\n
  3. 0<\/li>\n\n\n\n
  4. Music<\/li>\n\n\n\n
  5. Some song name.mp3<\/li>\n<\/ol>\n\n\n\n


    And we are interested in only the last item that is actually at index 6 which is also the length of our filePath list.<\/p>\n\n\n\n

    So, get that last item which is the music name, and add it to our songNames list and also update the listview with the songNames list.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Now, we have to work on our music player buttons.<\/p>\n\n\n\n

    Get the playPause Btn click event. We have two situations:<\/p>\n\n\n\n

    Either the icon on the button is the play one or the pause one.<\/p>\n\n\n\n

    So put in an if else block from control and check for this condition.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    If playpause button was pressed while the play icon is showing on it, then this means we should start playing some music but we need to also know if the music was paused so that we can resume it so check for musicPaused variable. If it is false, we need to start music from the very beginning. We also need to check if the user has added some songs or not and if not, we have to show an alert using notifier.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    If the musicPaused variable is true, we will go in the else condition and just start the player without setting the source again.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    The last else block is for the situation where the icon on the button is pause so we need to pause the music and change the icon to the play icon.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Now, the stop button code is fairly simple.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    What happens when the player finishes one song and has to start playing the next item in the playlist i.e. musicUris.<\/p>\n\n\n\n

    The code will be the same as the next button code.<\/p>\n\n\n\n

    So, let\u2019s make a procedure for this to avoid repetition of similar code. For playing the next song, we need to check if we still have at least one song left for playing and then, we increment musicPos and play the song corresponding to the incremented musicPos.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Call this procedure from both the next button click event and the player completion event.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n

    Our previous button code is similar to our procedure but this time, we have to subtract one from musicPos but we only do it if there is a previous song in the playlist and we aren\u2019t already on the first song.<\/p>\n\n\n\n


    Last but not least, I added code for deleting items from the playlist i.e. listview by tapping on it. I used the same method in the shopping list app.<\/p>\n\n\n\n

    Here, we need to delete from two lists and also update our musicPos. For example, we are playing song no. 4 and the user deletes song no. 2 so our musicPos should now become 3 instead of 4. We only have to do this if the user deletes a song that is in a position less than the music Pos. If the user deletes song no. 6 and we are playing song. 4 then our musicPos isn\u2019t affected by this change and it will stay 4.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    We are done and I hope you liked this tutorial.<\/p>\n\n\n\n

    You can further enhance this app by storing the songUris and songNames in TinyDB so that your playlist is there when you open your app again. Just remember to load the lists from tinyDB in Screen initialize and store them in TinyDB again wherever you are making changes to them such as adding items to them or removing items from them.<\/p>\n\n\n\n

    Have fun coding this app.<\/p>\n\n\n\n

    I hope you liked this tutorial. You can support my work by clicking the button below.<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    <\/a>You can also watch the video here:<\/p>\n\n\n\n

    \n