Sabtu, 12 Juni 2021

BAB 10 MEMBUAT APPS MEDIA PLAYER DAN VIDEO PLAYER PADA ANDROID STUDIO

MediaPlayer

Salah satu komponen terpenting framework media adalah class MediaPlayer. Objek class ini dapat mengambil, mendekode, serta memutar audio dan video dengan sedikit penyiapan. Class ini mendukung beberapa sumber media yang berbeda, seperti:
• Resource lokal
• URI internal, seperti yang mungkin Anda peroleh dari Content Resolver
• URL eksternal (streaming)


Membuat App VidioPlayer 
 
1. Pertama jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

Configure Your Project
Name → VidioPlayer
Package Name → ubah menjadi nama blog kalian masing-masing
Save Location → D:\2021\semester 6\TI-2\PAB\ VidioPlayer
Language → Java
Minimum API Level → API 14 → Klik Finish


2. Siapkan sebuah file Video dengan forma file, Buat sebuah direktori/folder engan nama raw di dalam folder ../res/raw dengan cara klik kanan pada folder res lalu pilih New – Directory seperti gambar di bawah ini
3. Copy file video yang telah kita siapkan tadi kedalam folder ../raw dengan cara klik kanan pada folder raw lalu pilih Show in Explore seperti gambar di bawah ini.
 Setelah itu akan tampil windows explorer lalu Paste di dalam folder raw file tadi.


4. Selanjutnya ketikan kode program / script activity_main.xml di bawah ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:background="#FA8072"
    android:orientation="vertical">

    <TextView
        android:id="@+id/songName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textStyle="bold"
        android:layout_margin="20dp"
        android:textColor="#ffffff"
        android:text="Judul vidio"/>

    <VideoView
        android:id="@+id/vidioplay"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

    <TextView
        android:id="@+id/songDuration"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="#ffffff"
        android:text="Durasi vidio"/>

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="30dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/btn_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="14dp"
                android:onClick="backforward"
                android:src="@android:drawable/ic_media_rew"/>

            <ImageButton
                android:id="@+id/btn_pause"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="14dp"
                android:onClick="pause"
                android:src="@android:drawable/ic_media_pause"/>

            <ImageButton
                android:id="@+id/btn_play"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="14dp"
                android:onClick="play"
                android:src="@android:drawable/ic_media_play"/>

            <ImageButton
                android:id="@+id/btn_forward"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="14dp"
                android:onClick="forward"
                android:src="@android:drawable/ic_media_ff"/>
        </LinearLayout>
</LinearLayout>

5. Setelah itu Buka dan ubah script MainActivity.java seperti di bawah ini

package meilaniepu.blogspot.com.vidioplayer;

import android.content.res.AssetFileDescriptor;
import android.media.MediaMetadataRetriever;
import android.net.Uri;
import android.os.Bundle;
import android.media.MediaPlayer;
import android.provider.MediaStore;
import android.util.Log;
import android.view.View;
import android.widget.SeekBar;
import android.widget.TextView;
import android.os.Handler;
import android.widget.VideoView;

import java.util.concurrent.TimeUnit;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private MediaPlayer mediaPlayer;
    private TextView songName, songDuration;
    private VideoView videoView;
    private SeekBar seekBar;
    private double timeStart= 0, finalTime = 0;
    private int forwardTime = 20000, backwardTime = 20000;
    private Handler durationHandler = new Handler();
    private boolean swtch = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        songName = (TextView) findViewById(R.id.songName);
        songDuration =(TextView) findViewById(R.id.songDuration);
        mediaPlayer = MediaPlayer.create(this, R.raw.lawschool);
        MediaMetadataRetriever meta = new MediaMetadataRetriever();
        videoView = (VideoView) findViewById(R.id.vidioplay);
        String path = "android.resource://" + getPackageName() + "/" + R.raw.lawschool;
        videoView.setVideoURI(Uri.parse(path));

        seekBar = (SeekBar) findViewById(R.id.seekBar);
        songName.setText("Vidio.mp4");
        seekBar.setOnSeekBarChangeListener(new yourListener() );
        seekBar.setClickable(false);

    }
     private class yourListener implements SeekBar.OnSeekBarChangeListener {
         public void onProgressChanged (SeekBar seekBar, int progress, boolean fromUser){
             if (swtch){
                 videoView.seekTo(progress);
             }
         }
         public void onStartTrackingTouch(SeekBar seekBar) {
             swtch = true;
         }
         public void onStopTrackingTouch(SeekBar seekBar) {
             swtch = false;
         }
     }
     private Runnable updateSeekBarTime = new Runnable() {
        public void run(){
            timeStart = videoView.getCurrentPosition();
            seekBar.setProgress((int) timeStart);
            double timeRemaining = finalTime - timeStart;
            songDuration.setText(String.format("%d min, %d sec",
                    TimeUnit.MILLISECONDS. toMinutes((long) timeRemaining),
                    TimeUnit.MILLISECONDS. toSeconds((long) timeRemaining)-

                    TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes((long) timeRemaining))));
            durationHandler.postDelayed(this, 1000);

        }
     };
    public void play(View view){
        videoView.start();
        finalTime = videoView.getDuration();
        seekBar.setMax((int) videoView.getDuration());
        timeStart = videoView.getCurrentPosition();
        seekBar.setProgress((int) timeStart);
        durationHandler.postDelayed(updateSeekBarTime, 1000);
    }
    public void pause(View view){
        videoView.pause();
    }
    public void forward(View view){
        timeStart = timeStart + forwardTime;
        videoView.seekTo((int) timeStart);
    }
    public void backforward(View view){
        timeStart = timeStart - backwardTime;
        videoView.seekTo((int) timeStart);
    }


}

6. Lalu coba jalankan menggunakan emulator yang tersedia di Android Studio Anda, maka akan tampil seperti gabar dibawah ini



Membuat App MusicPlayer
Menggunakan API MediaPlayer

Langkah Awal sama seperti membuat VidioPlayer
1. Pertama jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project
c. Pilih → Empty Activity → Next 
d. Configure Your Project

2. Siapkan sebuah file suara/musik dengan forma file .mp3 dan file gambar headphone dengan jenis file .png 

3. Buat sebuah direktori/folder engan nama raw di dalam folder ../res/raw dengan cara klik kanan pada folder res lalu pilih New – Directory seperti gambar di bawah ini


4. Copy file music.mp3 tadi kedalam folder ../raw dengan cara klik kanan pada folder raw lalu pilih Show in Explore seperti gambar di bawah ini. Setelah itu akan tampil windows explorer lalu Paste di dalam folder raw file music.mp3 tadi


5. Copy kan Kembali file headphone.png yang telah kita siapkan tadike dalam folder ../res/drawable/ sehingga akan tampil struktur project seperti gambar di bawah ini


6. Selanjutnya ketikan kode program / script activity_main.xml seperti di bawah ini

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:background="#0b00a3"
    android:orientation="vertical"
    android:padding="20dp">

    <TextView
        android:id="@+id/songName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Just as Usual"
        android:textColor="#ffffff"/>
    <ImageView
        android:id="@+id/mp3Icon"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="30dp"
        android:background="#ffffff"
        android:padding="30dp"
        android:src="@drawable/headphone"/>
    <TextView
        android:id="@+id/songDuration"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Durasi Lagu"
        android:textColor="#ffffff"/>
    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="30dp"
        android:gravity="center_horizontal">
        <ImageButton
            android:id="@+id/btn_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="14dp"
            android:onClick="backforward"
            android:src="@android:drawable/ic_media_rew"/>
        <ImageButton
            android:id="@+id/btn_pause"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="14dp"
            android:onClick="pause"
            android:src="@android:drawable/ic_media_pause"/>
        <ImageButton
            android:id="@+id/btn_Play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="14dp"
            android:baselineAligned="false"
            android:onClick="play"
            android:src="@android:drawable/ic_media_play"/>
        <ImageButton
            android:id="@+id/btn_forward"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="14dp"
            android:onClick="forward"
            android:src="@android:drawable/ic_media_ff"/>
    </LinearLayout>
</LinearLayout>

7. Setelah itu Buka dan ubah script MainActivity.java seperti di bawah ini

package 07nenengevi.blogspot.musicplayer;

import android.content.res.AssetFileDescriptor;
import android.media.MediaMetadataRetriever;
import android.net.Uri;
import android.os.Bundle;
import android.media.MediaPlayer;
import android.provider.MediaStore;
import android.util.Log;
import android.view.View;
import android.widget.SeekBar;
import android.widget.TextView;
import android.os.Handler;
import java.util.concurrent.TimeUnit;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
    private MediaPlayer mediaPlayer;
    private TextView songName, songDuration;
    private SeekBar seekBar;
    private double timeStart = 0, finaltime= 0;
    private int forwardtime = 20000, backwardTime = 20000;
    private Handler durationHadler = new Handler();
    private boolean swtch = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        songName = (TextView) findViewById(R.id.songName);
        songDuration = (TextView) findViewById(R.id.songDuration);
        mediaPlayer = MediaPlayer.create(this, R.raw.music);

        MediaMetadataRetriever meta = new MediaMetadataRetriever();

        final AssetFileDescriptor afd = getResources().openRawResourceFd(R.raw.music);
        meta.setDataSource(afd.getFileDescriptor(),afd.getStartOffset(),afd.getLength());

        String music_duration = meta.extractMetadata(MediaMetadataRetriever.METADATA_KEY_DURATION);
        finaltime = Long.parseLong(music_duration);

        Log.v("musicDuration", "Duration : "+music_duration);

        seekBar =(SeekBar) findViewById(R.id.seekBar);
        songName.setText("Just as Usual.mp3");
        seekBar.setMax((int) finaltime);
        seekBar.setOnSeekBarChangeListener(new yourListener());
        seekBar.setClickable(false);
    }
    private class yourListener implements SeekBar.OnSeekBarChangeListener {
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            if (swtch){
                mediaPlayer.seekTo(progress);
            }
        }
        public void onStartTrackingTouch(SeekBar seekBar) {
            swtch = true;
        }
        public void onStopTrackingTouch(SeekBar seekBar) {
            swtch = false;
        }
}
private Runnable updateSeekBarTime = new Runnable() {
    @Override
    public void run() {
        timeStart = mediaPlayer.getCurrentPosition();
        seekBar.setProgress((int) timeStart);
    double timeRemaining = finaltime - timeStart;
    songDuration.setText(String.format("%d min, %d sec",
        TimeUnit.MILLISECONDS.toMinutes((long) timeRemaining),
        TimeUnit.MILLISECONDS.toSeconds((long) timeRemaining)-
                TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes((long) timeRemaining))));
    durationHadler.postDelayed(this, 1000);
         }
    };
    public void play(View view) {
        mediaPlayer.start();
        timeStart = mediaPlayer.getCurrentPosition();
        seekBar.setProgress((int) timeStart);
        durationHadler.postDelayed(updateSeekBarTime, 100);
    }
    public void pause(View view) {
        mediaPlayer.pause();
    }
    public void forward(View view) {
        timeStart = timeStart + forwardtime;
        mediaPlayer.seekTo((int) timeStart);
    }
    public void backForward(View view) {
        timeStart = timeStart - backwardTime;
        mediaPlayer.seekTo((int) timeStart);
    }
}

8. Lalu coba jalankan menggunakan emulator yang tersedia di Android Studio atau Hp anda maka akan tampil seperti gabar dibawah ini



-

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

BAB 13 CRUD Database MySQL dengan PHP Pada Apk Android Studio

CRUD adalah singkatan dari create, read, update, and delete. Akronim CRUD mengidentifikasi semua fungsi utama yang melekat pada database re...