[안드로이드 코틀린] 12. 실전프로젝트(5) - 실로폰

실전 프로젝트

실습 - 손전등

주요구성

- 가로화면으로 고정된 한 액티비티에 도, 레, 미, 파, 솔, 라, 시, 도 음판이 있음

- 음판을 누르면 해당 음이 재생됨

    - 음판은 텍스트 뷰 속성을 수정하고, 소리는 SoundPool 클래스를 사용하여 재생함

- SoundPool은 안드로이드 5.0부터 사용법이 달라짐

    - 구 버전과 신 버전기기에서 모두 잘 동작하도록 버전 분기를 적용함

 

1. 레이아웃 작성

가로 모드로 고정하기

방법1) MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // 화면이 가로 모드로 고정되게 하기 첫번째 방법
        //requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

 

방법2) AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
       ...
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:screenOrientation="landscape">
        ...
        </activity>
    </application>

</manifest>

 

가로 모드로 고정하기 

- 레이아웃 에디터에서 미리보기를 가로 모드로 변경해야 함

- activity_main.xml 파일을 열고 레이아웃 에디터를 가로 모드로 작업할 수 있도록 ① Orientation for Preview를 클릭하여 ② Landscape를 선택함

 

타이블 바 없애기

- AndoridManifest.xml : 테마(theme)가 모양 결정

        android:theme="@style/Theme.Xylophone"

- Res/values/themes/themes.xml → .noActionBar

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.Xylophone" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>

    <style name="Theme.Xylophone" parent="Base.Theme.Xylophone" />
</resources>

 

텍스트 뷰로 음판 만들기

 

2. 소리 재생하기

실로폰 소리 파일 준비하기 

- 실로폰 소리 파일을 http://bit.ly/2K9dQjo 에서 다운로드받음 03 STEP

 

raw 리소스 디렉토리 추가

- Resource type 드롭다운 리스트를 클릭하여 raw를 선택하고 OK를 클릭함

 

raw 리소스 디렉토리 추가

- 프로젝트 창에서 raw 디렉터리를 선택하고 단축키 를 누름

- 붙여넣을 파일 이름을 수정하는 화면이 표시되는데 여기서는 그대로 OK를 클릭함

- raw 디렉터리에 실로폰 소리 파일을 붙여넣기만 하면 준비가 완료됨

 

안드로이드에서 소리를 재생하는 방법

- MediaPlayer 클래스와 SoundPool 클래스를 사용하는 방법이 있음

- MediaPlayer 클래스는 일반적으로 소리를 한 번만 재생하는 경우 또는 노래나 배경음과 같은 경우에는 유용함 

- SoundPool은 다음과 같이 사용함

 

- load ( ) 메서드와 play ( ) 메서드의 원형은 다음과 같음

 

SoundPool 초기화 버전 분기 

- MainActivity 파일을 열고 SoundPool 객체를 초기화하는 코드 추가

class MainActivity : AppCompatActivity() {

    private val soundPool = SoundPool.Builder().setMaxStreams(8).build()    // SoundPool 객체를 초기화
    
    ...
}

 

음판에 동적으로 클릭 이벤트 정의하기

- 먼저 listOf ( ) 함수를 사용하여 텍스트 뷰의 ID와 음원 파일의 리소스 ID를 연관 지은 Pair 객체 8개를 리스트 객체 sounds로 만듦 

- Pair 클래스는 두 개의 연관된 객체를 저장함

- Pair(first, second) : first와 second, 각각의 객체를 연결해 한 쌍으로 만들어줌

class MainActivity : AppCompatActivity() {

    private val soundPool = SoundPool.Builder().setMaxStreams(8).build()    // SoundPool 객체를 초기화

    private val sounds = listOf(        // 사용할 음원들을 리스트로 만들기
        Pair(R.id.do1, R.raw.do1),       // (위젯 아이디, 사용할 음원)
        Pair(R.id.re, R.raw.re),
        Pair(R.id.mi, R.raw.mi),
        Pair(R.id.fa, R.raw.fa),
        Pair(R.id.sol, R.raw.sol),
        Pair(R.id.la, R.raw.la),
        Pair(R.id.si, R.raw.si),
        Pair(R.id.do2, R.raw.do2)
    )

    ...
}

 

음판에 동적으로 클릭 이벤트 정의하기 

- sounds 리스트를 forEach ( ) 함수를 사용하여 요소를 하나씩 꺼내서 tune( ) 메서드에 전달함

 

음판에 동적으로 클릭 이벤트 정의하기

- tune ( ) 메서드는 Pair 객체를 받아서 load ( ) 메서드로 음원의 ID를 얻고, findViewById( ) 메서드로 텍스트 뷰의 ID에 해당하는 뷰를 얻고, 텍스트 뷰를 클릭했을때 음원을 재생함

- 앱을 종료할 때는 반드시 release ( ) 메서드를 호출하여 SoundPool 객체의 자원을 해제함

class MainActivity : AppCompatActivity() {

    ...

    override fun onCreate(savedInstanceState: Bundle?) {
        // 화면이 가로 모드로 고정되게 하기 첫번째 방법
        //requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        sounds.forEach { turn(it) }
    }

    private fun turn(pair: Pair<Int, Int>) {
        // 플레이 전 soundPool 객체 load
        val soundId = soundPool.load(this, pair.second, 1)      // pair의 두번째(음원), 1: 우선순위

        // 클릭 시 플레이하기 (Pair의 첫번째 -> 아이디이므로 바로 불러 와서 사용)
        findViewById<TextView>(pair.first).setOnClickListener {
            soundPool.play(soundId, 1.0f, 1.0f, 0, 0, 1.0f)     // (어떤 id, 왼쪽볼륨, 오른쪽볼륨, 우선순위, 반복, 속도)
        }
    }

    override fun onDestroy() {  // 앱 종료 시 자동으로 객체 소멸
        super.onDestroy()
        soundPool.release()
    }
}

 

최종

package com.example.xylophone

import android.media.SoundPool
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    private val soundPool = SoundPool.Builder().setMaxStreams(8).build()    // SoundPool 객체를 초기화

    private val sounds = listOf(        // 사용할 음원들을 리스트로 만들기
        Pair(R.id.do1, R.raw.do1),       // (위젯 아이디, 사용할 음원)
        Pair(R.id.re, R.raw.re),
        Pair(R.id.mi, R.raw.mi),
        Pair(R.id.fa, R.raw.fa),
        Pair(R.id.sol, R.raw.sol),
        Pair(R.id.la, R.raw.la),
        Pair(R.id.si, R.raw.si),
        Pair(R.id.do2, R.raw.do2)
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        // 화면이 가로 모드로 고정되게 하기 첫번째 방법
        //requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        sounds.forEach { turn(it) }
    }

    private fun turn(pair: Pair<Int, Int>) {
        // 플레이 전 soundPool 객체 load
        val soundId = soundPool.load(this, pair.second, 1)      // pair의 두번째(음원), 1: 우선순위

        // 클릭 시 플레이하기 (Pair의 첫번째 -> 아이디이므로 바로 불러 와서 사용)
        findViewById<TextView>(pair.first).setOnClickListener {
            soundPool.play(soundId, 1.0f, 1.0f, 0, 0, 1.0f)     // (어떤 id, 왼쪽볼륨, 오른쪽볼륨, 우선순위, 반복, 속도)
        }
    }

    override fun onDestroy() {  // 앱 종료 시 자동으로 객체 소멸
        super.onDestroy()
        soundPool.release()
    }
}

 

 

정리

- 소리를 재생하려면 MediaPlayer 또는 SoundPool 클래스를 사용함

- 일반적인 경우 MediaPlayer 클래스가 간편하지만 연속으로 소리를 재생하는 경우에는 SoundPool 클래스를 사용함 

- 뷰가 여러 개일 때는 forEach{ } 등을 사용하여 동적으로 클릭 이벤트를 구현할 수 있음

 

앱 시작시 배경음악 - MusicPlayer

나만의 플레이리스트 - 음악 연결해서 버튼 누르면 음악 재생