안드로이드 스튜디오를 기반으로 음악재생 페이지를 우선 만들어 보려고 한다.
나중에 발전 시켜서 음악재생 앱까지 발전 시킬 수 있을지는 모르겠지만 조금씩 발전 시켜보면 내 테크닉과 앱 구성 능력이 좋아지지 않을까 기대한다.
우선 이 페이지를 만든이유는 단순히 학교 실습과제이다.^^
근데 하다보니 좀 더 발전시키면 음악재생 사이트나 앱까지도 만들 수 있을 것 같다는 생각이 들어서 프로젝트로 해보면 좋을 것 같다.
일단 간단하게 음악을 재생하는 페이지만을 안드로이드 스튜디오로 구현해보려고 한다.
먼저 음악의 앨범 사진을 보여주고 간단하게 재생 버튼과 뒤로 감기 앞으로 감기 버튼만을 구현 해보겠다.
일단 프런트를 구현해보면 아래와 같다. (사진은 교수님이 주신거니까 무시하자...음악파일도..)
프런트 부분은 간단하게 이미지 뷰와 이미지 버튼 시크바를 linearLayout으로 구현 했다.
혼자서도 여러번 해보다 보면 누구든 할 수 있을 것 같아서 생략하겠다.
일단 메인 액티비티만을 사용하여서 구현했다. 메인 액티비티는 아래의 코드와 같다.
package org.techtown.music;
import androidx.appcompat.app.AppCompatActivity;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.SeekBar;
public class MainActivity extends AppCompatActivity {
ImageButton play;
MediaPlayer mediaPlayer;
Boolean click=false;
SeekBar seekBar;
ImageButton back;
ImageButton front;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
play=findViewById(R.id.button3);
seekBar=findViewById(R.id.seekBar);
back=findViewById(R.id.back);
front=findViewById(R.id.front);
mediaPlayer=MediaPlayer.create(MainActivity.this,R.raw.old_pop);//음악 가져오기
seekBar.setMax(mediaPlayer.getDuration());//시크바의 최대길이를 음악길이로 설정
play.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view) {
if(click.equals(false)){
play.setImageResource(R.drawable.ic_pause);
click=true;
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean UserInput) {
if(UserInput) mediaPlayer.seekTo(progress);//재생 위치 변경
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
mediaPlayer.start();
new Thread(new Runnable() {
@Override
public void run() {
while (mediaPlayer.isPlaying()){
try{
Thread.sleep(1000);
}catch (Exception e){
System.out.println("조졌어요");
}
seekBar.setProgress(mediaPlayer.getCurrentPosition());
}
}
}).start();
}
else if(click.equals(true)){
play.setImageResource(R.drawable.ic_play_arrow);
click=false;
mediaPlayer.pause();
}
}
});
back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mediaPlayer.seekTo(mediaPlayer.getCurrentPosition()-5000);
seekBar.setProgress(mediaPlayer.getCurrentPosition());
}
});
front.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mediaPlayer.seekTo(mediaPlayer.getCurrentPosition()+5000);
seekBar.setProgress(mediaPlayer.getCurrentPosition());
}
});
}
@Override
protected void onStop() {
super.onStop();
mediaPlayer.start();
}
@Override
protected void onDestroy() {
super.onDestroy();
mediaPlayer.stop();
}
}
로직은 간단하다 재생버튼을 누르면 click의 true, false를 기반으로 재생버튼과 정지버튼으로 바뀌게 만들었고,
재생버튼이 눌리면 시크바의 쓰레드와 같이 음악이 재생되고 시크바의 위치와 음악의 재생부분 위치를 동일하게 만들어 주었다.
시크바의 움직임은 setOnSeekBarChangeListener()이 부분을 이해하면 쉽게 구현 할 수 있다. 그리고 seekTo 메서드를 통해서 mediaplayer의 재생위치를 설정하면 된다. 이 두 가지 조건과 Thread를 이해한다면 구현은 끝이다.
먼저 xml파일과 연결을 위해 view들을 id로 연결하여 가져오고 mediaplayer 객체를 음악파일과 연결하여 정의한다.
그 다음에 seekBar의 길이를 음악의 길이와 같게 만들어준다. 그래야 음악이 끝나면 시크바도 끝에 도달하고 음악도 끝나기 때문이다.
다음으로 위에 말했듯이 가장 중요한 로직인 버튼을 눌렀을 때의 이벤트 처리를 해주면 된다.
setOnSeekBarChangeListener()는 OnprogressChanged(), OnStartTrackingTouch(), OnStopTrackingTouch()의 3가지 메서드를 overriding해야하는데 여기서는 OnprogresssChanged()메서드만을 정의한다.
스스로 해보면 좋을 것 같다.
'project' 카테고리의 다른 글
채팅앱 만들기 서버 없이 DB 까지 - 2 (0) | 2022.11.24 |
---|---|
채팅앱 만들기 서버 없이 DB 까지 (0) | 2022.11.24 |