медиаплеер на android studio

Android Studio: Создаем аудиоплеер со шкалой времени (AudioPlayer)

MnogoBlog > Android и LibGDX > Android Studio: Создаем аудиоплеер со шкалой времени (AudioPlayer)
Добавить комментарий

Здравствуйте, сегодня создадим на Android Studio более сложный аудиоплеер – со шкалой времени, в данном плеере будет показано время с начала проигрывания аудио трека, а также время до его окончания.

Скачать исходники для статьи можно ниже

Начала аналогично как и по предыдущей статье, когда мы создавали самый простой двухкнопочный аудиоплеер:

Создадим вот такой Аудиоплеер со шкалой времени:

медиаплеер на android studio

1. Создаем новый проект в Android Studio:

audiopleer1

Я выбрал платформу Android 4.0 – для того чтобы наше будущее приложение запускалось на версиях Андроида – Android 4.0+

audiopleer2

Выбираем шаблон Empty Activity (Пустое Активити):

audiopleer3

Далее оставляем все по умолчанию:

audiopleer4

И жмем на кнопку Finish.

2. Редактируем файл activity_main.xml

audiopleer5

Переходим в папку res, в ней в подпапку layout и жмем на файл – activity_main.xml, далее открываем вкладку Text (Текст):

audiopleer6

И здесь добавляем кнопку, шкалу времени и три текстовые зоны (будет показано время в милесекундах, а также в обычных минутах и секундах до окончания песни и с начала проигрывания песни) в “Аудиоплеер”, вот такой код файла activity_main.xml у меня получился: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="mnogoblog.ru.myaudioplayer.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Мой аудиоплеер!" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="252dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageView" />
        </LinearLayout>

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

        <Button
            android:text="@string/play_str"
            android:textSize="15pt"
            android:textStyle="bold"
            android:onClick="playAndStop"
            android:id="@+id/ButtonPlayStop"
            android:layout_width="420dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginRight="-3dp"/>

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


            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:text="Medium Text"
                    android:id="@+id/textView1" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:text="Medium Text"
                    android:id="@+id/textView2" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:text="Medium Text"
                    android:id="@+id/textView3" />



            </LinearLayout>
        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

Если перейти на вкладку “Design” (Дизайн) увидим как будет выглядеть наше будущее приложение:

myyypleer1

3. Редактируем файл MainActivity

Далее переходим в файл MainActivity:

audiopleer8

Заменяем код на следующий: 

package mnogoblog.ru.myaudioplayer;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.media.MediaPlayer;
import android.os.Handler;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.TextView;

import java.util.concurrent.TimeUnit;

public class MainActivity extends AppCompatActivity {

    private Button buttonPlayStop;
    private MediaPlayer mediaPlayer;
    private SeekBar seekBar;
    private TextView textView1;
    private TextView textView2;
    private TextView textView3;
    private double finalTime = 0;
    private double finalTime2 = 0;

    private final Handler handler = new Handler();

    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.activity_main);
        initViews();

    }
    private void initViews() {
        buttonPlayStop = (Button) findViewById(R.id.ButtonPlayStop);

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

        seekBar = (SeekBar) findViewById(R.id.seekBar);
        seekBar.setMax(mediaPlayer.getDuration());
        seekBar.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                seekChange(v);
                return false;
            }
        });

        textView1 = (TextView) findViewById(R.id.textView1);
        textView2 = (TextView) findViewById(R.id.textView2);
        textView3 = (TextView) findViewById(R.id.textView3);



    }

    public void startPlayProgressUpdater() {
        seekBar.setProgress(mediaPlayer.getCurrentPosition());

        if (mediaPlayer.isPlaying()) {
            Runnable notification = new Runnable() {
                public void run() {
                    startPlayProgressUpdater();
                }
            };
            handler.postDelayed(notification,1000);
        }else{
            mediaPlayer.pause();
            buttonPlayStop.setText(getString(R.string.play_str));

        }

        String text = seekBar.getProgress() + " из " + seekBar.getMax();
        textView1.setText(text);


        finalTime = seekBar.getProgress();
        textView2.setText(String.format("%d min, %d sec",
                TimeUnit.MILLISECONDS.toMinutes((long) finalTime),
                TimeUnit.MILLISECONDS.toSeconds((long) finalTime) -
                        TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes((long)
                                finalTime)))
        );


        finalTime2 = seekBar.getMax() - finalTime;

        textView3.setText(String.format("%d min, %d sec",
                TimeUnit.MILLISECONDS.toMinutes((long) finalTime2),
                TimeUnit.MILLISECONDS.toSeconds((long) finalTime2) -
                        TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes((long)
                                finalTime2)))
        );

    }

    private void seekChange(View v) {
        if(mediaPlayer.isPlaying()){
            SeekBar sb = (SeekBar) v;
            mediaPlayer.seekTo(sb.getProgress());
        } else {
            SeekBar sb = (SeekBar) v;
            mediaPlayer.seekTo(sb.getProgress());
            finalTime = seekBar.getProgress();
            textView2.setText(String.format("%d min, %d sec",
                    TimeUnit.MILLISECONDS.toMinutes((long) finalTime),
                    TimeUnit.MILLISECONDS.toSeconds((long) finalTime) -
                            TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes((long)
                                    finalTime)))
            );


            finalTime2 = seekBar.getMax() - finalTime;

            textView3.setText(String.format("%d min, %d sec",
                    TimeUnit.MILLISECONDS.toMinutes((long) finalTime2),
                    TimeUnit.MILLISECONDS.toSeconds((long) finalTime2) -
                            TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes((long)
                                    finalTime2)))
            );
        }

    }

    public void playAndStop(View v){
        if (buttonPlayStop.getText() == getString(R.string.play_str)) {
            buttonPlayStop.setText(getString(R.string.pause_str));
            try{
                mediaPlayer.start();
                startPlayProgressUpdater();
            }catch (IllegalStateException e) {
                mediaPlayer.pause();
            }
        }else {
            buttonPlayStop.setText(getString(R.string.play_str));
            mediaPlayer.pause();
        }
    }
}

Здесь в 38 строчке мы указали на имя аудиофайла, в данном примере – это mymusic.

4. Редактируем файл – strings.xml

Заходим res, в подпапку values и кликаем по файлу strings.xml

myyypleer2

И заменяем на следующий код: 

<resources>
    <string name="app_name">Myaudioplayer</string>
    <string name="play_str">PLAY</string>
    <string name="pause_str">PAUSE</string>
</resources>

5. Загружаем аудиофайл.

Осталось загрузить аудиофайл, для этого нужно создать папку raw и загрузить в неё какой-нибудь mp3 файл с именем mymusic.

Для этого наводим курсор мыши на папку res и кликаем правой кнопкой мыши, открывается менюшка – выбираем в ней пункт New, и подпункт Directory – и создаем новую папочку с именем raw:

audiopleer9

audiopleer10

И у нас появилась новая папочка raw – наводим на неё курсор мышки и кликаем правой кнопкой, открывается меню – выбираем в ней пункт Show in Explorer:

audiopleer11

после чего у нас откроется папочка, в которой заходим в папку raw и закачиваем туда mp3 с названием mymusic – можете скачать данный файл с моего сайта!

audiopleer12

6. Создаем apk файл.

Теперь нам нужно создать apk файл для загрузки на Android устройства – для этого выбираем в верхнем меню пункт “Build”, подпункт “Build Apk”

audiopleer13

Через некоторое время появится вот такое сообщение справа вверху:

audiopleer14

Жмем на ссылку и у нас открывается папочка с apk файлом по имени
app-debug.apk

audiopleer15

Можете переименовать файл, например в mypleer.apk и загрузить к себе на смартфон, установить и запустить приложение.

На этом все классных вам Android приложений!

Похожие записи:

Введите свой email адрес для того, чтобы подписаться на мой блог:

knopkisoc

Добавить комментарий