How to create Music Player with Firebase

Hello Android Studio Lovers. In this article I am going to discuss How to create music player with firebase in Android Studio. First of all we need Android Studio, If you are a new user to Android Studio, Install First. (Click here to learn how to install Android Studio) Let’s back to article “How to create Music Player with Firebase – 2021”.

How to create Single Music Player with Firebase – Android Studio 2021

Create Firebase Account and Store Songs

Go to Firebase account using firebase.google.com. Then connect your Android Application to Firebase. ( If you are a new user, Click here to learn Android Firebase tutorial ) Then go to Firebase console again and go to Storage tab also. (you can find storage tab on the left hand side. there is a sidebar in the firebase console. )

After that you have to do some changes in Rules. Find the Rules tab in the storage tab on the top of the page. If you are use authentication to your app. you have to change the Rules like this.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

After that you can add songs to firebase. Go to Files and upload your songs. We need to URL to connect your song with your app. to get the URL, click a song. you can see “File Location” tab on the right hand side. Copy the “Access Token”. (Once you click on the link, it will automatically copying)

Lets create the XML layout file

Here is the code for above music player image. In here I am using a drawable file as a background image.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/mainback"
    tools:context=".MusicPlayer">

    <!--        main header-->
    <RelativeLayout
        android:id="@+id/main001"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/aboutBackBtn"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:src="@drawable/ic_back_arrow"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="cursive"
                android:gravity="center"
                android:text="Song Name"
                android:textColor="#000833"
                android:textSize="20dp"
                android:textStyle="bold" />
        </LinearLayout>
    </RelativeLayout>

    <!--    image-->
    <RelativeLayout
        android:id="@+id/main002"
        android:layout_below="@+id/main001"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/mussss"/>

    </RelativeLayout>


    <!--    player-->
    <RelativeLayout
        android:id="@+id/main003"
        android:layout_below="@id/main002"
        android:layout_margin="20dp"
        android:padding="10dp"
        android:background="@drawable/border_music_player"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:orientation="horizontal"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/previouseBtn"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginTop="20dp"
                android:layout_marginRight="30dp"
                android:layout_marginLeft="30dp"
                android:layout_marginBottom="20dp"
                android:src="@drawable/previouse_button"/>

            <ImageView
                android:id="@+id/playBtn"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="20dp"
                android:onClick="musicplay"
                android:src="@drawable/play_button" />

            <ImageView
                android:id="@+id/pauseBtn"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="20dp"
                android:onClick="musicpause"
                android:src="@drawable/pause_button" />

            <ImageView
                android:id="@+id/stopBtn"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="20dp"
                android:onClick="musicstop"
                android:src="@drawable/stop_button" />

            <ImageView
                android:id="@+id/NextBtn"
                android:layout_width="39dp"
                android:layout_height="40dp"
                android:layout_marginLeft="30dp"
                android:layout_marginTop="20dp"
                android:layout_marginRight="30dp"
                android:layout_marginBottom="20dp"
                android:src="@drawable/next_button" />
        </LinearLayout>
    </RelativeLayout>

</RelativeLayout>

Lets code the Java thing

All songs are in the Firebase. So the App need internet to play that. First of all go Manifests file and past this code for it.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

Then you have define variables in onCreate() method. (if you don’t know, it’s okay, it’s very easy. click here to refer. Refer the Android Studio articles and come back. )

After that you have to create Mediaplayer instance in onCreate() meethod.

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_anand_umang_bhayo);
        
        playBtn = findViewById(R.id.playBtn);
        pauseBtn = findViewById(R.id.pauseBtn);
        stopBtn = findViewById(R.id.stopBtn);
        NextBtn = findViewById(R.id.NextBtn);
        previouseBtn = findViewById(R.id.previouseBtn);
        
        MediaPlayer music = MediaPlayer.create(this, Uri.parse("https://firebasestorage.googleapis.com/v0/b/shree-ganesh-78dbe.appspot.com/o/anandumangbhayo.mp3?alt=media&token=6891eec6-8dbd-4d4b-8885-7151a9443d6b"));

    }

Refer the code given above. you can see a URL. that is the copied one from the Firebase. So paste your URL in there.

Lets code other methods

After onCreate() method, you can implement this code to play the music.

 public void musicplay(View v) throws IOException {

        ConnectivityManager cm = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);

      if (cm.getActiveNetworkInfo() != null && cm.getActiveNetworkInfo().isConnected()) {
            Toast.makeText(musicPlayer.this,"Playing...",Toast.LENGTH_LONG).show();
            music.start();
        } else {
            Toast.makeText(musicPlayer.this,"Check Your Internet Connection",Toast.LENGTH_LONG).show();
        }

    }

In here, I am using ConnectivityManager package to check user’s internet connection. It means music will play only, if the user is connected to the internet. If not Toast message will display to the user. If connected, music will play.

These are the Pause and Stop methods to pause and stop the song.

 public void musicpause(View v)
    {
        music.pause();
    }

    public void musicstop(View v)
    {
        music.stop();
        music = MediaPlayer.create(this, Uri.parse("https://firebasestorage.googleapis.com/v0/b/shree-ganesh-78dbe.appspot.com/o/anandumangbhayo.mp3?alt=media&token=6891eec6-8dbd-4d4b-8885-7151a9443d6b"));
    }

In the stop method, you can see we implemented Mediaplayer instance. that’s because music.stop will stop the music and remove the song URL from the instance. that’s why we implement that again.

Here is the full code of the java file.


public class musicPlayer extends AppCompatActivity {

    ImageView playBtn, pauseBtn, stopBtn , previouseBtn , NextBtn ;
    MediaPlayer music;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_anand_umang_bhayo);
        
        playBtn = findViewById(R.id.playBtn);
        pauseBtn = findViewById(R.id.pauseBtn);
        stopBtn = findViewById(R.id.stopBtn);
        NextBtn = findViewById(R.id.NextBtn);
        previouseBtn = findViewById(R.id.previouseBtn);
        
        music = MediaPlayer.create(this, Uri.parse("https://firebasestorage.googleapis.com/v0/b/shree-ganesh-78dbe.appspot.com/o/anandumangbhayo.mp3?alt=media&token=6891eec6-8dbd-4d4b-8885-7151a9443d6b"));

    }

    public void musicplay(View v) throws IOException {
        ConnectivityManager cm = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);

        if (cm.getActiveNetworkInfo() != null && cm.getActiveNetworkInfo().isConnected()) {
            Toast.makeText(musicPlayer.this,"Playing...",Toast.LENGTH_LONG).show();
            music.start();
        } else {
            Toast.makeText(musicPlayer.this,"Check Your Internet Connection",Toast.LENGTH_LONG).show();
        }

    }

    public void musicpause(View v)
    {
        music.pause();
    }

    public void musicstop(View v)
    {
        music.stop();
        music = MediaPlayer.create(this, Uri.parse("https://firebasestorage.googleapis.com/v0/b/shree-ganesh-78dbe.appspot.com/o/anandumangbhayo.mp3?alt=media&token=6891eec6-8dbd-4d4b-8885-7151a9443d6b"));
    }



}

That’s it. Thank you for reading “How to create single music player with firebase in Android Studio” article.

If you want to familiar to Android Studio – use “Let’s familiar with Mobile Application Development“.

Android Fragment – “Android Fragments 2021“

Refer Android Firebase Article – https://builditmasters.com/category/android-studio-firebase-tutorial/

If you are a newbie to Android. Follow and refer articles. Click below link to get started. Make sure to leave a comment.