docs : 실로폰앱 예제 (소리wav파일, soundPool을 이용)

[philipy355]

class MainActivity : ComponentActivity() {
    private val viewModel by viewModels<MainViewModel>()
    override fun onCreate(savedInstanceState: Bundle?) {
        requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
        super.onCreate(savedInstanceState)
        setContent {
            XylophoneScreen(viewModel = viewModel)
        }
    }
}

class MainViewModel(application: Application) : AndroidViewModel(application){

    private val soundPool = SoundPool.Builder().setMaxStreams(8).build()

    private val sounds = listOf(
        soundPool.load(application.applicationContext, R.raw.do1, 1),
        soundPool.load(application.applicationContext, R.raw.re, 1),
        soundPool.load(application.applicationContext, R.raw.mi, 1),
        soundPool.load(application.applicationContext, R.raw.fa, 1),
        soundPool.load(application.applicationContext, R.raw.sol, 1),
        soundPool.load(application.applicationContext, R.raw.la, 1),
        soundPool.load(application.applicationContext, R.raw.si, 1),
        soundPool.load(application.applicationContext, R.raw.do2, 1),
    )
    fun playSound(index: Int){
        soundPool.play(sounds[index], 1f, 1f, 0, 0, 1f)
    }

    override fun onCleared() {
        soundPool.release()
        super.onCleared()
    }
}

@Composable
fun XylophoneScreen(
    viewModel: MainViewModel
){
    val keys = listOf(
        Pair("도", Color.Red),
        Pair("레", Color(0XFFFF9800)),
        Pair("미", Color(0XFFFFC107)),
        Pair("파", Color(0XFF8BC34A)),
        Pair("솔", Color(0XFF2196F3)),
        Pair("라", Color(0XFF3F51B5)),
        Pair("시", Color(0XFF673AB7)),
        Pair("도", Color.Red),
    )

    Row(
        modifier = Modifier.fillMaxSize(),
        horizontalArrangement = Arrangement.SpaceEvenly,
    ){
        keys.forEachIndexed { index, key ->
            val padding = (index + 2) * 8 // 16, 24, 32
            Keyboard(
                modifier = Modifier
                .padding(top = padding.dp, bottom = padding.dp)
                .clickable {
                   viewModel.playSound(index)
                },
                text = key.first,
                color = key.second,)
        }
    }
}

@Composable
fun Keyboard(
    modifier: Modifier,
    text: String,
    color : Color
){
    Box(
        modifier = modifier
            .width(50.dp)
            .fillMaxHeight()
            .background(color = color)
    ){
        Text(
            text = text,
            style = TextStyle(color = Color.White, fontSize = 20.sp),
            modifier = Modifier.align(Alignment.Center),
        )
    }
}