How To Build A Singing App And Share Songs on Social Media - Hive Programmers

in StemSocial11 months ago

Greetings to everyone on Hive and greetings to my favorite science community online, StemSocial.

I'll start by wishing everyone a Merry Christmas. Yeah I myself I'm very surprised that I got enough time to literally do a tutorial blog on Christmas day.

Polish_20231225_151458838.png
Original Image Source by Boskampi from Pixabay

YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png

The reason I had to sacrifice sometime was because I wanted to make Christmas memorable and I've loved this series of mine ever since it started over a month ago. So in honor of my own series, I wanted to share an episode on Christmas Day.

Well guys, I've already received a lot of text messages of people wishing me a Merry Christmas but what inspired this blog was when I saw people receiving voice notes of friends and family singing Christmas songs.

I figured why not teach my followers and readers how to build a recording App to record themselves singing or even even wishing a Merry Christmas and directly share it through social media platforms like Email, Facebook and even WhatsApp messenger.

So guys that's going to be my special Christmas edition for this series.

Today's tutorial will cover only the basic and essential steps including permission requests, layout creation, recording functionality, and finally extended sharing options.

This is going to be a fun one guys, so let's get to work🎅

Prerequisites and Project Setup

As always, we begin by setting up our Android project to start building our App.

For the newcomers to Android programming, you'll need two main softwares, Android Studio IDE which is the platform on which we'll build our App and Java Development Kit, JDK installed correctly so your PC can execute Java codes and instructions.

After successfully installing these softwares, open Android Studio and click on "Create a New Android Project".

As always, choose Empty Activity as the template of the project and click on Next. You can now set the App name and package name of your App. I'll go ahead and name my APP, "Christmas Recorder".

Also guys we're still using Java as the programming language instead of Kotlin so please ensure that Java is the selected programming language.

When you're satisfied with the project configuration, click on the "finish" button, sit back and wait for Android Studio to prepare your App project.

2dk2RRM2dZ8gKjXsrozapsD83FxL3Xbyyi5LFttAhrXxr16mCe4arfLHNDdHCBmaJroMz2VbLrf6Rxy9uPQm7Ts7EnXL4nPiXSE5vJWSfR53VcqDUrQD87CZSpt2RKZcmrYrze8KanjkfyS8XmMCcz4p33NZmfHE4S9oRo3wU2.png

Requesting Permissions in AndroidManifest

Now guys, our recording App would probably need to use a few services on the Android device which would include the audio service and the storage service.

Since the user will probably record their voice and store the audio on the phone, we definitely need to request these permissions so our App can access the service when it gets launched.

Of course guys the Permission request code will certainly be written inside your AndroidManifest.xml file.

Here's how your code should look like

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png

Our User Interface Design

It's time to work on the front end design of our App. This recorder App will be a very basic one and would need three main buttons.

One button will start the audio recording, the second will stop the recording and the third button will share the audio on your preferred social media platform.

So guys open your activity_main.xml file and let's design our very simple three button user interface layout.

Here's your your layout code should look

<Button
    android:id="@+id/btnRecord"
    android:text="Record"
    android:onClick="onRecordClick" />

<Button
    android:id="@+id/btnStop"
    android:text="Stop"
    android:onClick="onStopClick"
    android:enabled="false" />

<Button
    android:id="@+id/btnShare"
    android:text="Share"
    android:onClick="onShareClick"
    android:enabled="false" />

YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png

Recording and Saving Audio (MainActivity.java):

It's now time for us to write the logic code of our App. The backend code will do three things; it would start the audio recording when the user clicks the record button, stop and save the audio when user presses the stop button and share the audio when user presses share button.

This means we're probably going to be creating an onClick method for all three buttons and implement the commands.

Now guys since Christmas comes once a year we're going to write our entire backend code in one file😂

So I hope you're ready for the marathon coding. We're simply going to implement the recording functionality, audio stopping functionality, and saving audio in the MainActivity.java file.

Here's how your code should look like

import android.media.MediaRecorder;
import android.os.Environment;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
import java.io.File;
import java.io.IOException;

public class MainActivity extends AppCompatActivity {
    private MediaRecorder mediaRecorder;
    private String outputFile;

    public void onRecordClick(View view) {
        outputFile = Environment.getExternalStorageDirectory().getAbsolutePath() + "/recording.3gp";
        mediaRecorder = new MediaRecorder();
        mediaRecorder.setAudioSource(MediaRecorder.AudioSource.MIC);
        mediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP);
        mediaRecorder.setAudioEncoder(MediaRecorder.OutputFormat.AMR_NB);
        mediaRecorder.setOutputFile(outputFile);

        try {
            mediaRecorder.prepare();
            mediaRecorder.start();
            enableButton(R.id.btnStop, true);
            enableButton(R.id.btnRecord, false);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void onStopClick(View view) {
        mediaRecorder.stop();
        mediaRecorder.release();
        mediaRecorder = null;

        enableButton(R.id.btnRecord, true);
        enableButton(R.id.btnStop, false);
        enableButton(R.id.btnShare, true);
    }

    public void onShareClick(View view) {
        shareVia("com.whatsapp");
        shareVia("com.facebook.katana");
        shareVia("com.zhiliaoapp.musically");
        shareViaEmail();
    }

    private void shareVia(String packageName) {
        Intent share = new Intent(Intent.ACTION_SEND);
        share.setType("audio/*");
        share.putExtra(Intent.EXTRA_STREAM, Uri.fromFile(new File(outputFile)));
        share.setPackage(packageName);

        try {
            startActivity(share);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private void shareViaEmail() {
        Intent emailIntent = new Intent(Intent.ACTION_SENDTO, Uri.fromParts(
                "mailto", "", null));
        emailIntent.putExtra(Intent.EXTRA_SUBJECT, "Subject");
        emailIntent.putExtra(Intent.EXTRA_TEXT, "Body");
        emailIntent.putExtra(Intent.EXTRA_STREAM, Uri.fromFile(new File(outputFile)));

        try {
            startActivity(Intent.createChooser(emailIntent, "Send email..."));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private void enableButton(int buttonId, boolean isEnabled) {
        Button button = findViewById(buttonId);
        button.setEnabled(isEnabled);
    }
}

In my above code, the user after recording the audio should be able to share the audio through Whatsapp, Facebook, Email and titkok which has "com.zhiliaoapp.musically" as the package name.

2dk2RRM2dZ8gKjXsrozapsD83FxL3Xbyyi5LFttAhrXxr16mCe4arfLHNDdHCBmaJroMz2VbLrf6Rxy9uPQm7Ts7EnXL4nPiXSE5vJWSfR53VcqDUrQD87CZSpt2RKZcmrYrze8KanjkfyS8XmMCcz4p33NZmfHE4S9oRo3wU2.png

Congratulations and Merry Christmas Guys

Congratulations guys, we have completed our basic Christmas Audio recording App. Of course you can use the App to record audios completely unrelated to Christmas but I wanted to make it a special App for Christmas voice messages and audio.

I hope you enjoyed this particular tutorial guys. You can definitely go ahead and run your App either on an emulator or your very own physical Android Device.

When the App launches, try it out by pressing the audio record button, record your audio, press stop and press the share button to share through any of your preferred social media platform.

Thanks so much for taking the time and I would like to thank everyone that has constantly supported this series till today.

I love you all and wish you all a Merry Christmas. Have fun out there and send a Christmas wish to someone.

Have a lovely day and catch you next time on stemsocial. Goodbye 👨‍💻🎅


You Can Follow Me @skyehi For More Like This And Others

Sort:  

Greetings My friend! Thank you for the article. I'm more of a Python guy, but I'd love to learn more about Java. What would be the first concept to have down to make learning Java much smoother?

Also, have a Merry Christmas!

Hi there new friend, I'm very pleased that you stopped by to read my blog. Alright so first of all welcome to my series. The very fact that you have python background means that learning Java would not be too difficult for you.

Java is an object oriented programming language so your understanding of classes, objects, inheritance, and polymorphism will definitely be a strong foundation for Java journey.

If there are any challenges ket me know I'll be if help. Thanks for stopping by, I hope you enjoyed the blog and Merry Christmas 🥰

Thank you for the thoughtful answer! Merry Christmas

You're welcome dear new friend, happy to have you here👍 enjoy your Christmas Holidays🥰❤️

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

Thanks for including @stemsocial as a beneficiary, which gives you stronger support.