Create Music Player app in Sketchware

To create a Music Player app in sketchware, follow the steps given below.

1. Create a new project in Sketchware.

2. In VIEW area on main.xml, add a ListView listview1 with height wrap_content, and weight 1. Add a SeekBar seekbar1, an ImageView imageview1, and three TextViews textview1, textview2, and textview3, as shown in the image below.

3. Create a CustomView mycustom.xml and add a TextView textview1, and an ImageView imageview1 in it. For listview1 select mycustom.xml as it's customView.

4. Add a MediaPlayer component mp, a Shared Preferences component sp:sp and a Timer component timer.


5. Create six More Blocks MPcreate(pos), MPstart, and MPpause for the MediaPlayer and searchFolders, getFileList in [filePath] and extra.


6. Add three number variables n, r and songPosition, and five String variables currentfile, songMinutes, songSeconds, folder, folderName.

Also add a List String folderList, List String fileList and a List Map allmusic.

7. In onCreate event, use blocks as shown in image below.

Here we perform following actions:
i. Make imageview1 and progressbar1 GONE.
ii. Set songPosition to -1.
iii. If the shared preferences key "allsongs" is empty, call the AsyncTask GetSongsTask using following code:
(new GetSongsTask()).execute();
iv. If the shared preferences key "allsongs" is not empty, get all data from shared preferences sp key "allsongs" and convert to List Map allmusic. Display the ListMap allmusic in listview1.

8. In listview1 onBindCustomView event, use blocks as shown in image below.
Here we get the file names of mp3 files in List Map allmusic and display them in textview1 of CustomView.

9. In more block MPcreate(pos), use blocks as shown in image below.




Here we perform following actions:
i. Set String currentfile to file path of song at pos in List Map allmusic.

ii. Get name of song from currentfile and display it in textview3.

iii. Make imageview1 VISIBLE.

iv. Set songPosition to pos.

v. Create MediaPlayer for currentfile using following code:
mp = MediaPlayer.create(getApplicationContext(), Uri.fromFile(new java.io.File(currentfile)));

vi. Set OnCompletionListener for the MediaPlayer using following code:
mp.setOnCompletionListener(new MediaPlayer.OnCompletionListener(){

public void onCompletion(MediaPlayer theMediaPlayer){

vii. On completion of song, reset and release the MediaPlayer, increase songPosition by 1, then create MediaPlayer for the new songPosition and start the MediaPlayer.

viii. Close MediaPlayer OnCompletionListener using following code:
}
});
ix. Set Seekbar max to song duration.

x. Display song duration in textview2.

10. In more block MPstart, use blocks as shown in image below.

Here we perform following actions:
i. Start playing the song using block MediaPlayer start.
ii. Display pause image in imageview1.
iii. Use a TimerTask, and every 400ms set progress of seekbar1 to current duration of song, and display current duration of song in textview1.

11. In more block MPpause, use blocks as shown in image below.
Here we perform following actions:
i. Cancel the Timer.
ii. Pause the MediaPlayer.
iii. Display play image in imageview1.

12. In the event listview1 onItemClicked, use blocks as shown in image below.
Here we perform following actions:
i. If songPosition is -1, create MediaPlayer for the song at the position of ListView clicked, and start playing the song.
ii. If songPosition is same as the position of ListView clicked, pause the song if it is playing and play the song if it is paused.
iii. If the position of ListView clicked is different from songPosition,
  a. if any song is playing then pause the song,
  b. reset MediaPlayer,
  c. release song from the MediaPlayer,
  d. Create MediaPlayer for the song at position of ListView clicked, and
  e. Start playing the song.

13. In the event seekbar1 onStopTrackingTouch, use blocks as shown in image below.

Here if songPosition is not -1, play song from the duration selected on seekbar

14. In the event imageview1 onClick, use blocks as shown in image below.
Here we pause the song if it is playing and play the song if it is paused.

15. In the event imageview2 onClick, use call the AsyncTask GetSongsTask using following code:
(new GetSongsTask()).execute();

16. In the onPause or onStop event use blocks as shown in image below.

Here if songPosition is not -1, and if MediaPlayer is playing, then pause the song.

**IMPORTANT**
If this step is causing errors or crashes, skip this step. Also if you want to continue playing song in background, skip this step.

17. In the More Block extra, use codes and blocks as shown below.


Here we perform following actions:
i. Define a new class AsyncTask GetSongsTask.
}

private class GetSongsTask extends AsyncTask<Void, Void, Void> {
@Override
protected void onPreExecute() {

ii. In onPreExecute, make imageview2 GONE and progressbar1 VISIBLE.

iii. Use following code:
}

@Override
protected Void doInBackground(Void... path) {

iv. In doInBackground method, set number r to 0, clear allmusic, clear folderList.
Then use getFileList in [filePath] block to get path of all songs from external storage to ListMap allmusic.
After that convert ListMap allmusic to Json String and save it in shared preferences using key "allsongs".

v. Use following code for onProgressUpdate and onPostExecute methods.
return null;
}
@Override
protected void onProgressUpdate(Void... values) {
}
@Override
protected void onPostExecute(Void param){

vi. In onPostExecute, make imageview2 VISIBLE and progressbar1 GONE. Display ListMap allmusic in listview1. Toast number of songs added.

vii. Use following code:
}

18. Define More Block getFileList in [filePath]  using blocks as shown in image below.


19. Define More Block searchFolders using blocks as shown in image below.


20. Save and Run the project. The Music Player app is ready.

Get all songs from sdcard in the music player app

Comments

  1. I like u guy, u are a constant uploader,smart
    pls can I have your WhatsApp num I have a lot to ask u

    ReplyDelete
  2. How can someone make a referral system with Sketchware

    ReplyDelete
  3. Hello sir.
    How can i add next button in my music player

    ReplyDelete
    Replies
    1. Add an image for next. In its Event OnClick, set songPosition to songPosition + 1, MPCreate(songPosition);
      MPStart


      Java code :

      songPosition = songPosition + 1, or, if it's doesn't work ( assignementOperator Expression ),
      songPosition = + 1;
      _MPCreate(songPosition);
      _MPStart();

      Delete
  4. Help me sir :
    I can't create . In make my apk like your music player .
    Here errors >>
    java.lang.NullPointerException: Attempt to invoke virtual method 'boolean android.media.MediaPlayer.isPlaying()' on a null object reference
    at com.my.newproject28.MainActivity$3.onClick(MainActivity.java:170)
    at android.view.View.performClick(View.java:5647)
    at android.view.View$PerformClick.run(View.java:22465)
    at android.os.Handler.handleCallback(Handler.java:754)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:163)
    at android.app.ActivityThread.main(ActivityThread.java:6394)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:904)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:794)

    ReplyDelete
    Replies
    1. This means the app executed MediaPlayer isPlaying before MediaPlayer create.

      It means no song is selected and you clicked a View which makes reference to the song which is playing.

      Delete
  5. 1. ERROR in /storage/emulated/0/.sketchware/mysc/ 604/app/src/main/java/com/kicau/mania/ MainActivity.java (at line 306) mp-MediaPlayer.create(getApplicationContext0, Uri.fromFile(new java.io.File(currentfile); mp cannot be resolved to a variable 1 problem (1 error)

    what to fix ..
    Thanks..

    ReplyDelete
    Replies
    1. Change 'mp' to your MediaPlayer component name.
      ..(component name)..= MediaPlayer.create(.....

      Delete
    2. Yessss..
      successful ... but there are still a few flaws ... first. if 1 song ends, why can't the playr play the next song ... second. why does the song stop when the cellphone opens another application ... can this application still run when the phone opens another application ..

      Come on, friend, develop this application ... I'm already passionate about this.

      Delete
    3. This comment has been removed by the author.

      Delete
  6. you are smart my brother can you please make a tutorial on how to make a private chat app for example if many users are online I can chose one to private chat with the person.

    ReplyDelete
  7. Pls bro make video how to add video player in sketchware

    ReplyDelete
  8. Hey buddy, you do not know how to read the metadata of that file? that of artist, genre, cover, etc. I would like to add that to the app ...
    Thank you

    ReplyDelete
  9. Help me please :(
    java.lang.NullPointerException: Attempt to invoke virtual method 'boolean android.media.MediaPlayer.isPlaying()' on a null object reference
    at com.my.newproject28.MainActivity$3.onClick(MainActivity.java:170)
    at android.view.View.performClick(View.java:5647)
    at android.view.View$PerformClick.run(View.java:22465)
    at android.os.Handler.handleCallback(Handler.java:754)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:163)
    at android.app.ActivityThread.main(ActivityThread.java:6394)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:904)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:794)

    ReplyDelete
    Replies
    1. There was probably a problem for onClick events.

      Delete
  10. Replies
    1. Go to event, select More Blocks and click the plus sign to create a new one. Name it MPcreate, change the variable from Boolean to number. In the next field, name your Variable pos and click the Add button to the right, then click the Add button on the bottom. Now when you go to add logic to anything if you go to More Blocks you will have the purple block Moderate with the empty space to put another block in.

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
  12. 1. error in /storage/emulated/0/.sketchware/mysc/619/app/src/main/java/com/my/newproject/mainActivity.java(at line 241)
    mp=MediaPlayer.creatr(getApplicationContext{), Uri.fromFile(new java.io.file(currentfile)))
    --------------
    this method creatr(Context, Uri) is undefined for the tipe of MediaPlayer
    --------------
    1 problem (1 error)

    please help me

    ReplyDelete
    Replies
    1. It should be 'create'.
      Change 'creatr' to ''create'.

      Delete
  13. I have a error. This error is image invisible , don't exit and no read song.Why?

    ReplyDelete
  14. Pleace help
    How to add auto next play all song when clicked listview

    ReplyDelete
  15. How to add auto next play all song when clicked listview

    ReplyDelete
  16. saya tidak bisa menemukan 6 more block, bantu saya menemukan ke 6 more block tersebut,

    ReplyDelete
    Replies
    1. more block itu dibuat sendiri Gan, jadi memang tidak tersedia dari awal, Klik tab "Even" lalu klik tanda tambah untuk membuatnya.

      Delete
  17. Saya sukses membuatnya. Tapi kenapa saat app mau di buka " aplikasi telah berhenti" mohon bantuannya

    ReplyDelete
  18. Hi bro
    At step 15 how can i add AsyncTask getsongTask on event imageview2onclick

    ReplyDelete
  19. Please help me. It keeps saying "0 Songs Added" even when I downloaded a music.
    I also have a question - how do you get songs in your SD card?

    ReplyDelete
    Replies
    1. Put the song in any specific folder and then get it from the folder by specifying folder name in the block codes.

      Delete
    2. on Android N, this method can't read SD cards, which only reads shared internal storage

      Delete
    3. i've same problem, 0 song added, android 9, how to fix?thx

      Delete
  20. How did you create this block(getFileList in)

    ReplyDelete
  21. I have problem with new version of sketchware i dont get (lenght of list ) block can you tell me what is this block name in last version

    ReplyDelete
  22. 1. ERROR in /storage/emulated/0/.sketchware/mysc/601/app/src/main/java/com/
    mehediproduction/music/mehedi/MainActivity.java (at line 337)
    mp MediaPlayer.create(getApplicationContext0, Uri.fromFile(new
    java.io.File(currentfile)):
    mp cannot be resolved to a variable
    2. ERROR in /storage/emulated/0/.sketchware/mysc/601/app/src/main/java/com/
    mehediproduction/music/mehedi/MainActivity.java (at line 339)
    mp.setOnCompletionListener(new Media Player.OnCompletionListener0
    mp cannot be resolved
    2 problems (2 errors)

    Bro,How to fix it.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. N°1 : Change "0" after "Context" by "()",
      N°2 : Change "mp" by your MediaPlayer Component.

      Delete
    3. And, I forgot, for N°2, change "0" by "()".

      Delete
  23. This code get with me a an error
    (new GetSongsTask()).execute();

    ReplyDelete
    Replies
    1. It's maybe in the MoreBlock "extra".

      Delete
    2. I have error saying error while extracting dolnBackground please help me

      Delete
  24. More errors. Please solve this. 😣

    ReplyDelete
  25. My app is not working. Error Dialog box is appearing when I open the app.

    ReplyDelete
    Replies
    1. Sens me the screenshot to cleona.sd@gmail.com.

      Delete
  26. An error occured
    Java.lang.RuntimeException:
    unable to pause activity......

    ReplyDelete
  27. Show me your program in "onPause" to cleona.sd@gmail.com.

    ReplyDelete
    Replies
    1. I am solve this problem but not show any song in my app and also not show play & pause buttom help me please.....

      Delete
  28. Hello,
    I like your post. Bur there shall be some improvement . I prefer to have a notification and Control music from notification. I use KWGT which show the music playing in home screen. Help me to do so.

    ReplyDelete
  29. On start I get an error with '(new GetSongsTask()).execute();'. I want to build my own music player app and use this example as a ground template to build on.
    Would be nice if someone could help me with this issue.

    Error log:
    1. ERROR in /storage/emulated/Ol.sketchware/mysc/ 613/app/src/main/java/com/tj/musicplayertest1/ MainActivity.java (at line 180)

    (new GetSongsTask()).execute();
    ^^^^^^^^^^^

    GetSongsTask cannot be resolved to a type

    2. ERROR in /storage/emu|ated/0/.sketchware/mysc/ 613/app/src/main/java/com/tj/musicplayertest1/ MainActivity.java (at line 190)

    (new GetSongsTask()).execute();
    ^^^^^^^^^^^^^^^

    GetSongsTask cannot be resolved to a type

    ReplyDelete
    Replies
    1. Check at extra more block...there should found a mistake...

      Delete
  30. Sir my player is not load any song only seek baar iis running

    ReplyDelete
  31. Why in my app the list of music duplicate?

    ReplyDelete
  32. Amazing article, Which you have shared about the music player. This article is very interesting and I liked to read it. If anyone looking to free music player online, then visit at trending.

    ReplyDelete
  33. Hi...can i ask the fuction of button for looping the song?please

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. Please can you help me with this problem

    1. ERROR in /storage/emulated/0/.sketchware/
    mysc/605/app/src/main/java/com/my/newproject/
    MainActivity.java (at line 148)
    (new GetSongsTask)).execute():
    AAAAAAAAAAAA
    GetSongsTask cannot be resolved to a type
    2. ERROR in /storage/emulated/0/.sketchware/
    mysc/605/app/src/main/java/com/my/newproject/
    MainActivityjava (at line 190)
    (new GetsongsTask0).execute(0
    GetSongsTask cannot be resolved to a type
    2 problems (2 errors))
    AAAAAAAAAAAA

    ReplyDelete
  36. I did but same result...
    Plzz help.

    ReplyDelete
  37. my app is working fine. but when last song is over app close automatically

    ReplyDelete
    Replies
    1. I have the same problem. But I can help you 😆. In "_MPCreate(pos)", after songPosition = songPosition + 1, do this :
      if(songPosition > length of(allmusics 🎵)) then
      _MPCreate(0);
      _MPStart();
      else
      _MPCreate(songPosition);
      _MPStart();

      👍

      Delete
    2. Thanks bro I got the logic...

      Delete
  38. Why this app didn't work in old Android versions like 5.0 it says Asynk task error

    ReplyDelete
  39. Please help me... when i build the app no errors but wen start i got this error and end application

    An error occured

    java.lang.RuntimeException: An error
    occured while executing dolnBackground()
    at android.os.AsyncTask
    $3.done(AsyncTask.java:304)
    at
    java.util.concurrent.FutureTask.finishComp
    letion(Future Task.java:355)
    at
    java.util.concurrent.FutureTask.setExcepti
    on(FutureTask.java:222)
    at
    java.util.concurrent. Future Task.run(FutureT
    ask.java:242)
    at android.os.AsyncTask$ Serial Executor
    $1.run(AsyncTask.java:231)
    at
    java.util.concurrent.ThreadPool Executor.ru
    nWorker(ThreadPool Executor.java:1112)
    at
    java.util.concurrent.Thread PoolExecutor
    $Worker.run(Thread PoolExecutorjava:
    587)
    at java.lang.Thread.run(Thread. java:818)
    END APPLICATION

    ReplyDelete
    Replies
    1. Show me 📩 your extra, getFileList(path) and searchFloders, to cleona.sd@gmail.com.

      Delete
  40. Please help. I followed every single step carefully. And luckily the app was successfully installed as there is no java syntax error. But when entering app, it is loading for about 1 min showing seekbar and all and shuts down immediately and reopens again automatically, with a blank screen. Please advise. Thanks

    ReplyDelete
    Replies
    1. Try changing the folder to your music folder

      Delete
  41. Hello sanjeev, please my app is created with no errors but when I launch it, it displays no songs from phone directory. Please help me

    ReplyDelete
  42. Ok I get the whole thing, but me what is the type of the moreblock

    Are the moreblocks all numbers? Please specify each

    ReplyDelete
  43. Sir here is a problem,
    How to resolve?

    (new GetSongsTask()).execute();
    ^^^^^^^^^^^^

    ReplyDelete
  44. Such a great information you have provided here. Get the best collection of Tv show series at the one place at starwarsnewsnet.com.

    ReplyDelete
  45. This also my problem

    Errors:

    java.lang.NullPointerException: Attempt to invoke virtual method 'boolean android.media.MediaPlayer.isPlaying()' on a null object reference
    at com.my.newproject28.MainActivity$3.onClick(MainActivity.java:170)
    at android.view.View.performClick(View.java:5647)
    at android.view.View$PerformClick.run(View.java:22465)
    at android.os.Handler.handleCallback(Handler.java:754)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:163)
    at android.app.ActivityThread.main(ActivityThread.java:6394)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:904)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:794)

    ReplyDelete
  46. How to make this update the songlist when a song is deleted or renamed or a new song is added?

    ReplyDelete
  47. I want to add an auto update feature.. when a new song is added or a song is removed or renamed.. the list will be updated. Is it possible? Help me pls

    ReplyDelete
  48. Hello, I would like to appreciate your work. It’s a great platform got to learn a lot. Your data is really worthy. Thank you so much. Keep it up!

     Playbox App For Android

     Playbox Download Android

    ReplyDelete
  49. Bro I get error but I did like you did

    ReplyDelete
  50. please sir help me.

    An error occured java.lang.NullPointerException: Attempt to invoke virtual method 'boolean android.media.MediaPla yer.isPlaying()' on a null object reference at com.my.newproject10.MainActivity $3.onClick(MainActivity.java:169) at android.view.View.performClick(View java:5273) at android.view.View $PerformClick.run(View.java:21315) at android.os.Handler.handleCallback( Handler.java:743) at android.os .Handler.dispatchMessag e(Handler.java:95) at android.os.Looper.loop(Looper.java: 150)at android.app.ActivityThread.main(Act ivityThread.java:5665) at java.lang.reflect.Method.invoke(Nati ve Method) at com.android.internal.os.Zygotelnit $MethodAndArgsCaller.run(Zygoteln it.java:822) at com.android.internal.os.Zygotelnit.m ain(Zygotelnit.java:712)

    ReplyDelete

Post a Comment

Popular posts from this blog

A Flash Light App in Sketchware

Simple car racing android game in Sketchware

In Sketchware: How to create a calculator for any simple formula?

Firebase auth in Sketchware for Login Activity