Create audio player app in 10 minutes

Create audio player app in 10 minutes

Welcome to hiewpoint, In this post you’ll learn how to use MediaPlayer Api to build a simple audio player app. By creating this app you’ll learn some basic concepts of MediaPlayer Api and AudioManager.
So what’s MediaPlayer and AudioManager? If we want our app to play video and sound then we need to use these two above mentioned.
MediaPlayer: This class is the primary API for playing sound and video.
AudioManager: This class manages audio sources and audio output on a device.Lets get started in building an app with Mediaplayer in android studio.


First setup the project with an empty activity and give it any preferred name.
In the activity_main.xml copy this below code.

Audio player app activity_main.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark"
        android:onClick="playMe"
        android:text="@string/play"
        tools:text="@string/play" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_dark"
        android:onClick="pauseMe"
        android:text="@string/pause"
        tools:text="@string/pause" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="24dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Volume" />

    <SeekBar
        android:id="@+id/timeline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TimeLine" />
</LinearLayout>

We have a playMe button and PauseMe button. Ofcourse play and pause are essential in any audioplayer app, we also have two seek bar to control the volume and timeline of audio.
Now copy these below lines of code in MainActivity.java

Audio player app MainActivity.java

import android.content.Context;
import android.media.AudioManager;
import android.media.MediaPlayer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.SeekBar;
import java.util.Timer;
import java.util.TimerTask;
MediaPlayer mediaPlayer;
AudioManager audioManager;

public class MainActivity extends AppCompatActivity {
public void playMe(View view){
    mediaPlayer.start();

}

public void pauseMe(View view){

    mediaPlayer.pause();
}



@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mediaPlayer = MediaPlayer.create(this, R.raw.myaudio);

    //Getting context from Audio Service
    audioManager = (AudioManager)getSystemService(Context.AUDIO_SERVICE);
    int myMaxVolume = audioManager.getStreamMaxVolume(AudioManager.STREAM_MUSIC);
    int myCurrentVolume = audioManager.getStreamVolume(AudioManager.STREAM_MUSIC);

    //Setting context values to Seekbar
    SeekBar volumeRocker = (SeekBar) findViewById(R.id.seekBar);
    volumeRocker.setMax(myMaxVolume);
    volumeRocker.setProgress(myCurrentVolume);


    //Set on change listener

    volumeRocker.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            audioManager.setStreamVolume(AudioManager.STREAM_MUSIC, progress, 0);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });


        //Setting a player timeline

    final SeekBar timeline = (SeekBar) findViewById(R.id.timeline);
    timeline.setMax(mediaPlayer.getDuration());

    new Timer().scheduleAtFixedRate(new TimerTask() {
        @Override
        public void run() {
            timeline.setProgress(mediaPlayer.getCurrentPosition());
        }
    }, 0, 1000);


    timeline.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            mediaPlayer.seekTo(progress);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });

}

}

Conclusion

So basically we first create instance of MediaPlayer and AudioManager and instantiate them in oncreate() as mediaPlayer=MediaPlayer.create(this,R.raw.myAudio);
audioManager=(AudioManager)getSystemService(Context.AUDIO_SERVICE); here we get the audio service in order to play the audio.

Inside the onClick methods of both the button consists of mediaPlayer.start() to start the audio and mediaPlayer.pause() to pause the audio.

In order to control the volume rocker we need to set current stream and max stream and assigned to two different variables. These two variables are used in seekbar(volume rocker).

volumeRocker.setMax(myMaxVolume);
volumeRocker.setProgress(myCurrentVolume);

To control the volume seekbar ,a seekbarChangeListener is added which listens to the movement of seekbar(volume rocker), inside the onProgressChanged(….) we added this audioManager.setStreamVolume(AudioManager.STREAM_MUSIC, progress, 0);

So that when user slide the seekbar it sets that current value to it.Similar to this seekbar ,another seekbar is created which listens to the timeline of audio and it uses mediaPlayer.seekTo() method to seek the audio wherever user slides.

Output

After implementing the source code in-place and properly, Your app will appear similar to this ! however you can easily edit the background color and button color. For any doubt comment on our post or send us a message on social media to get cleared instantly. Try some more modifications in this audio player app and wait for our next article. Happy coding !

Create audio player app  in 10 minutes

Thank you for reading this post. Follow us on Instagram and Facebook.


To know more tips and tricks you can follow articles on this category :
https://blog.hiewpoint.com/off-topic/

To know about web development and WordPress follow
https://blog.hiewpoint.com/web/

To know about Android development and Android Studio follow
https://blog.hiewpoint.com/android/

Add a Comment

Your email address will not be published. Required fields are marked *