AudioKit Extensive Tutorial Part 1: Make your Own Music Player!
If you have always wanted to make your own music player somewhere inside of you, this tutorial is for you. We will use Huawei’s relatively new AudioKit to develop one and I will show the steps one by one so that you can develop a music player on your own.
Do not rely on copy-pastes though, I am here to guide you, not let you copy-paste my code. To do that, you do not have to read this extensive tutorial, just click here to reach the full source code. Keep in mind that this source code contains three other HMS kits and their imperfect implementations, it is not a dedicated AudioKit-only app. However, if you are here to learn for real, let’s start below.
First of all, make sure you have everything you needed before starting to develop your app.
Hardware Requirements
- A computer (desktop or laptop) running Windows 7 or Windows 10
- A Huawei phone (with the USB cable), which is used for debugging
Software Requirements
- Java JDK (JDK 1.7 is recommended.)
- Android Studio 3.X
- SDK Platform 19 or later
- Gradle 4.6 or later
- HMS Core (APK) 5.0.0.300 or later
Required Knowledge
- Android app development basics
- Android app development multithreading
Secondly, you should integrate Huawei HMS Core to your app. Details are listed here, in the official documentation. You should complete #3 and #4 until “Writing the Code” part. From now on, I will assume that you have prepared your application and ready to go with necessary devices attached for running.
Apart from this tutorial, you can always use sample app provided by Huawei, by clicking here. Source code gives idea about most concepts but it is not well-explained and the code is kind of confusing. My tutorial will also use that sample app but it will not be the same thing at all.
For app resources like play button, pause button, skip button etc., please find your own resources or use the resources provided by Huawei sample app that I provided the link above. If you already have resources available, you can use them too because it is very important to have a responsive UI to track music changes, but ultimately it does not matter how they actually look. From now on, I will also assume that you have necessary drawables/images/buttons for a standard music player. If you are going to use the app for commercial purposes, make sure the resources you use have no copyright issues.
End Product
If you want to know what kind of product we will be having in the end, look no further. The below screenshot roughly describes our end product after this relatively long tutorial. Of course, all customizations and UI elements (including colors) are up to you, so it could differ from my product.
Also, as you can see my app contains AdsKit and Account Kit usages, which will not be included in this tutorial. That’s why, I will not give you the XML codes of my application (I already shared the my GitHub project link, if you are so inclined).
Remark: I mostly use the words audio file, music file and song(s) interchangably. Please do not get confused.
Let’s Plan!
Let’s plan together. We want to develop a music player application, so it should has some basic features that we want to support, such as play/pause, next/previous audio and seekbar updates. Seekbar will be showing us the progress of the music and it should be updated real time so that our music playback is always synced with life cycles of the app as well as the seekbar of our app. If you want to go further, we should add play modes, shuffle audio files, normal mode (sequential playback), loop the audio and loop the playlist. Of course, we want to render our cover image to the screen for a nice user experience and print the details of the audio file below it. And since we are only implementing the core features, we should have a playlist icon to open up the playlist and we should be able to choose an audio file from it. For the sake of simplicity, all browsed audio files from the device will be added to one single playlist for users to choose from. For the scope of this tutorial, creating new playlists, adding/removing files to those lists etc. are not supported. As can be predicted, our code will include a lot of button clicks.
I suggest you start with design on your own. Assuming that you have button/image resources you can imitate the design of my app (screenshot above) or your favorite music player. I placed the playlist button right above and clicking on it should open the playlist, and re-clicking should close it back. You can ignore the test ad below the playback buttons and AccountKit related parts above the cover image.
Let me remind you that I use view binding, so it is natural that you will not see much “findViewById”s. For official documentation of what I do, follow here.
Let’s code!
We should initialize our AudioKit managers to manage the playback later. Then, we should browse the local storage and get the audio files. After also completing listeners and notifications, we should implement button clicks so that users could have a smooth experience. Let’s start with a custom method called initializeManagerAndGetPlayList(…) to do the actual work, it is to be called in onCreate of the activity.
Let me explain what we do here. We need a thread operation to create the managers and get the configuration in AudioKit. Thus, I used AsyncTask to do just that.
Remark: AsyncTask is currently deprecated so I would suggest you to use other methods if you care about modernity.
If AsyncTask succeeds, then I get my HwAudioManager instance and set it to my global variable. After that, using that manager instance, I get my player and queue managers. (and config manager as well but it will be used less frequently)
After getting my managers, I get my local playlist by a method I will share below. The collections code is just to sort the list alphabetically, you do not have to use it. Later, there is another method called doListenersAndNotifications(…), to set the notification bar and to attach the listeners, which is a crucial part in playback management.
In onPostExecute method, now that my managers are ready, I set my adapter for my playlist. However, we will get back to this later on. You do not need to worry about for now.
Let’s see how getLocalPlayList(…) works.
Beware: In order for below method to work, you must ask for the storage permission from the user explicitly. How to deal with it is your own responsibility. You must consider all cases (like user not giving consent etc.). The below method will work only after the storage permission is granted.
HwAudioPlayItem is the AudioKit’s POJO class for audio files. It contains the basic attributes of an audio file that developers can set, to use them later. Please note that, as of the publish time of this article, HwAudioPlayItem does not contain enough methods to initialize. Thus, some of the fields you consider you would use may be lacking. For example, there is no field for album name and thus my screenshot above always displays “Album Unknown”.
By this method, we browse the local music files, retrieve them in the format of HwAudioPlayItem and add them to a local list. Before returning, see the size of it in the logs. Our playlist is therefore ready, after this operation.
Now let’s see how I set listeners and implement notifications.
Let me explain here. I know it looks complicated but most of it is almost copy-paste boiler plate code. First we attach listeners in a looper, HwAudioStatusListener is AudioKit’s listener class. After that we save our queue and set the notification bar. I use this code with else part almost commented out due to support issues but you may copy and paste it to try it out in lower versions of Android. That being said, it should be clear that you should update the resource names as per your needs/wants.
setBitmap(…) method is to render the cover image in notification bar layout. (You can find the customized layout in GitHub link I shared). You cannot find this method in this way in sample apps. It is a cool and important feature, so I suggest you use it. Also, there is a NotificationUtils class for additional notification bar related codes, and you may also find it in the GitHub. You do not have to put them separately, you can copy those code to MainActivity and still use them, if you think that that will not be overcomplicating your code.
Also the other Bitmap methods will let you use the setBitmap(…) method correctly. Also, they will be useful when rendering the cover image to main screen too. Since HwAudioPlayItem class do not have a field for image paths for easy renders, I had to use more than 2 methods to use the path of the song to retrieve the cover image and then use it to get the Bitmap of it.
Other intent methods are to implement the feature of close button to cancel the notification and for the main intent.
The End for now!
The rest of the application will be talked about in Part 2 of this series. We will be implementing onCreate method, button clicks and listeners in detail. See you there.
