개요

픽 정보 화면에서 음원 플레이어 UI와 함께 음원 재생을 위한 ExoPlayer 적용

image.png

ExoPlayer ?

https://goddoro.medium.com/exoplayer-component-how-interaction-20f87955d827

추가 정리하기

구현과정

ExoPlayer 사용

@Composable
fun MusicPlayer(
    context: Context = LocalContext.current,
    previewUrl: String,
) {
		val lifecycleOwner = LocalLifecycleOwner.current
    val exoPlayer = remember { ExoPlayer.Builder(context).build() }
    val mediaItem = MediaItem.fromUri(sourceUrl)
    
    LaunchedEffect(Unit) {
        exoPlayer.setMediaItem(mediaItem)
    }
    
    DisposableEffect(lifecycleOwner) {
        val lifecycleObserver = LifecycleEventObserver { _, event ->
            when (event) {
                Lifecycle.Event.ON_PAUSE -> exoPlayer.pause()
                Lifecycle.Event.ON_DESTROY -> exoPlayer.release()
                else -> {}
            }
        }

        lifecycleOwner.lifecycle.addObserver(lifecycleObserver)

        onDispose {
            exoPlayer.release()
        }
    }

    Column {
        PlayerAndroidView(exoPlayer)
    }
}

@androidx.annotation.OptIn(UnstableApi::class)
@Composable
private fun PlayerAndroidView(exoPlayer: ExoPlayer?) {
    AndroidView(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 24.dp),
        factory = {
            PlayerView(it).apply {
                player = exoPlayer
                Log.d("DetailPickScreen", "previewUrl:")
                showController()
                controllerShowTimeoutMs = -1
                controllerHideOnTouch = false
                useController = true
            }
        },
        update = { playerView ->
            playerView.player = exoPlayer
        }
    )
}